如何隐藏iframe标签的src属性URL值？是否可以加密部分外部URL？

核心前提 #

不存在100%彻底隐藏iframe src的方案，所有实现手段仅能提高普通用户查看、篡改地址的门槛。因为浏览器需要向目标地址发起请求获取资源，有前端调试基础的用户都可以通过控制台元素面板、网络请求日志拿到真实地址，不存在绝对的隐藏方案。

隐藏iframe src的实用技巧 #

• 动态赋值src，避免写死在静态HTML源码
  页面加载完成后通过JS动态给iframe赋值src，用户直接查看页面原始HTML时无法直接看到地址，只有渲染后的DOM中才会展示。
  示例代码：

  // 页面DOM加载完成后再赋值
  window.addEventListener('DOMContentLoaded', () => {
    const targetIframe = document.getElementById('custom-iframe')
    // 可搭配加密方案，先解密再赋值真实地址
    targetIframe.src = 'https://example.com/real-target-path'
  })
  

  对应的iframe标签代码：
  <iframe id="custom-iframe" src="" frameborder="0" width="100%" height="600"></iframe>

• 同域名代理层转发
  自己搭建同域名下的代理接口，iframe的src直接填写你的代理地址，后端收到请求后主动拉取外部目标地址的内容，再返回给前端展示。这种方案下用户能看到的只有你自己的代理地址，无法直接获取到真实的外部目标URL。
  注意需要自行处理跨域配置、Cookie传递、iframe内静态资源路径适配的问题，否则会出现资源加载失败的情况。

URL内容加密处理方案 #

• 如果你需要加密URL本身的敏感字段（比如参数、路径标识）：可以采用对称加密方案，后端提前将URL的敏感部分加密后传给前端，前端按约定的规则解密后拼接成完整地址，再赋值给iframe即可。可以对前端的解密逻辑做代码混淆，进一步提高用户破解的门槛。
• 如果你需要加密外部URL返回的内容：只能通过上述代理层拿到外部返回的内容后做加密，前端拿到加密内容后解密再注入到iframe中渲染，这种方案开发成本很高，还需要适配iframe内的JS、CSS资源加载逻辑，非必要不推荐使用。

内容的提问来源于stack exchange，提问作者TravelWhere