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
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
