表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
上面代码就是一个表单,一共包含三个控件:一个
用户在文本输入框里面,输入用户名,比如foobar,然后点击提交按钮,浏览器就会向服务器https://example.com/api发送一个 POST 请求,发送user=foobar这样一段数据。
+
=
该标签有如下属性。
for:关联控件的id属性,表示为该控件的操作结果。form:关联表单的id属性。name:控件的名称。
iframe
**
width="100%" height="500" frameborder="0" allowfullscreen sandbox> //这里的sandbox可以保证安全
上面的代码在当前网页嵌入https://www.example.com,显示区域的宽度是100%,高度是500像素。如果当前浏览器不支持
浏览器普遍支持
allowfullscreen:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。src:嵌入的网页的 URL。width:显示区域的宽度。height:显示区域的高度。sandbox:设置嵌入的网页的权限,详见下文。importance:浏览器下载嵌入的网页的优先级,可以设置三个值。high表示高优先级,low表示低优先级,auto表示由浏览器自行决定。name:内嵌窗口的名称,可以用于、
sandbox 属性
嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。
为了限制
sandbox可以当作布尔属性使用,表示打开所有限制。
sandbox属性可以设置具体的值,表示逐项打开限制。未设置某一项,就表示不具有该权限。
allow-forms:允许提交表单。allow-modals:允许提示框,即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。allow-popups:允许嵌入的网页使用window.open()方法弹出窗口。allow-popups-to-escape-sandbox:允许弹出窗口不受沙箱的限制。allow-orientation-lock:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。allow-pointer-lock:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。allow-presentation:允许嵌入的网页使用 Presentation API。allow-same-origin:不打开该项限制,将使得所有加载的网页都视为跨域。allow-scripts:允许嵌入的网页运行脚本(但不创建弹出窗口)。allow-storage-access-by-user-activation:sandbox属性同时设置了这个值和allow-same-origin的情况下,允许
注意,不要同时设置allow-scripts和allow-same-origin属性,这将使得嵌入的网页可以改变或删除sandbox属性。
sandbox是Web开发中的一个重要安全机制,它允许我们在一个沙盒环境中执行不信任的代码,从而提高应用程序的安全性。 具体来说,sandbox可以通过以下方式增强Web应用程序的安全性:
限制JavaScript的权限:默认情况下,JavaScript可以执行各种各样的操作,包括修改网页内容、读取访问者的Cookie、与服务器端通信等。但是,由于JavaScript的强大特性也会带来一些风险,比如恶意脚本攻击等。因此,sandbox机制可以限制JavaScript的权限,比如禁止访问Cookie、禁止访问外部资源等。防止跨站点脚本攻击:跨站点脚本攻击(XSS)是一种常见的Web安全漏洞,攻击者通过注入恶意脚本来实现攻击目标,比如窃取用户数据、篡改网页内容等。sandbox可以通过将执行环境限制在一个单独的文档域中,防止恶意脚本对其他文档域产生影响。防止点击劫持:点击劫持攻击是一种新型的Web安全攻击,通过将一个透明的iframe层覆盖在用户感兴趣的页面上,并将iframe的内容指向攻击者控制的恶意页面,从而引诱用户在不知情的情况下点击特定位置。sandbox可以通过禁止加载iframe来防止点击劫持攻击。 总之,sandbox是Web开发中的重要安全机制之一,它可以通过限制某些权限和行为,增强应用程序的安全性,避免安全漏洞和攻击风险。
loading 属性
loading属性可以触发
该属性可以取以下三个值:
auto:浏览器的默认行为,与不使用loading属性效果相同。lazy:
上面代码会启用
有一点需要注意,如果