web安全方案

一、使用内容安全策略

完善的内容安全策略(CSP)是前端应用程序安全的基石。CSP是浏览器中引入的一种标准,用于检测和缓解某些类型的代码注入攻击,包括跨站点脚本(XSS)和点击劫持。

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self'; connect-src 'self'">

MDN手册:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

二、启用XSS保护模式

如果用户输入确实注入了恶意代码,我们可以通过提供 "X-XSS-Protection": "1; mode = block" 头指令来指示浏览器阻止响应。

header("X-XSS-Protection: 1; mode=block"); // php header头

MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-XSS-Protection

三、禁用iframe嵌入以防止点击劫持攻击

点击劫持是一种攻击,网站A上的用户被诱骗对网站B执行某些操作。为了实现这一点,恶意用户将网站B嵌入到一个不可见的iframe中,然后将iframe放置在网站A上毫无防备的用户的光标之下,因此当用户单击,或者更确切地说,认为他们单击了网站A上的元素时,他们实际上是单击了网站B上的某个东西。

我们可以通过提供 X-Frame-Options 响应头来防止此类攻击,该响应头禁止在框架中呈现网站:

add_header X-Frame-Options sameorigin always; # nginx配置

MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

四、限制对浏览器功能和API的访问

使用 Feature-Policy 头指示浏览器拒绝访问我们的应用不需要的某些功能和API。

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" }));

MDN手册:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

五、不要泄露referrer值

为了防止referrer 值泄漏,我们将 Referrer-Policy 标头设置为 no-referrer :

<meta name="referrer" content="no-referrer">

MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

六、对第三方脚本使用子资源完整性

对于您使用的所有第三方脚本,请确保在可能的情况下包括 integrity 属性。浏览器具有 Subresource Integrity 功能,该功能可以验证您正在加载的脚本的加密哈希,并确保它未被篡改。

你的 script 标签如下所示:

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

值得说明的是,此技术对第三方库有用,但对第三方服务的作用较小。大多数情况下,当你为第三方服务添加脚本时,该脚本仅用于加载另一个从属脚本。无法检查依赖脚本的完整性,因为可以随时对其进行修改,因此在这种情况下,我们必须依靠严格的内容安全策略。

MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

参考链接:

PS:写作不易,如要转裁,请标明转载出处。
%{ comment.page.total }条评论

猜你想看

微信小程序:前端开发宝典

最近文章
工具操作
  • 内容截图
  • 全屏
登录
注册
回顶部