前端新手必看：5分钟理解no-referrer-when-downgrade

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   开发一个交互式学习模块，通过可视化方式展示no-referrer-when-downgrade的工作原理。要求包含动画演示HTTPS到HTTP跳转时的referrer信息变化，可交互的代码示例，以及即时反馈的测试题。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在学习前端安全相关的知识时，遇到了一个叫做no-referrer-when-downgrade的名词。一开始觉得有点抽象，但经过一番研究和实践后，发现其实并不难理解。今天就用最直白的语言，和大家分享一下这个知识点。

1. 什么是no-referrer-when-downgrade？

简单来说，no-referrer-when-downgrade是一种referrer策略，它规定了在网页跳转时，浏览器如何处理referrer信息的传递。具体来说，当从一个HTTPS页面跳转到另一个HTTP页面时（也就是所谓的"降级"），浏览器不会发送referrer信息；而在其他情况下（比如HTTPS到HTTPS，或者HTTP到HTTP），则会正常发送referrer。

2. 为什么这个策略很重要？

这个策略主要出于安全考虑。因为当从HTTPS页面跳转到HTTP页面时，如果传递了referrer信息，可能会泄露敏感数据。想象一下，如果你在一个加密的银行网站点击了一个外部链接，referrer信息可能会包含你的账户信息或其他隐私数据。

3. 如何设置这个策略？

设置方法其实很简单，主要有两种方式：

1. 在HTML的meta标签中设置：

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

1. 通过HTTP响应头设置：

Referrer-Policy: no-referrer-when-downgrade

4. 实际应用场景

这个策略在日常开发中很常见，比如：

• 当你的网站同时有HTTP和HTTPS版本时
• 当你的网站需要链接到外部HTTP资源时
• 当你需要平衡安全和用户体验时

5. 注意事项

虽然这个策略很实用，但使用时也需要注意几点：

1. 它不是所有浏览器的默认设置（虽然大多数现代浏览器默认使用这个策略）
2. 在某些特殊情况下，你可能需要更严格的referrer策略
3. 测试时要确保在各种浏览器和环境下验证效果

最近我在InsCode(快马)平台上实践了这个知识点，发现他们的实时预览功能特别适合测试这种跳转行为。不需要复杂的本地环境搭建，直接在浏览器中就能看到效果，对于新手来说真的很友好。

如果你也是前端新手，想快速验证各种referrer策略的效果，不妨试试这个平台。我个人体验下来，发现它大大简化了学习曲线，让抽象的概念变得直观可见。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   开发一个交互式学习模块，通过可视化方式展示no-referrer-when-downgrade的工作原理。要求包含动画演示HTTPS到HTTP跳转时的referrer信息变化，可交互的代码示例，以及即时反馈的测试题。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果