iframe表单提交跳转403错误排查及指定img元素0.5秒自动更新方法

1. iframe动态加载链接返回403错误修复 #

问题原因 #

目标站点配置了Referer请求头校验：

• 你直接硬编码iframe src属性时，本地file协议打开的HTML页面请求默认不携带Referer头，符合站点校验规则，可正常加载
• 通过form提交跳转的方式，浏览器会自动携带本地页面的Referer头，被站点反爬策略拦截，返回403错误
  另外你原代码存在写法错误：iframe元素没有action属性，动态修改iframe加载地址需要修改src属性。

修复步骤 #

• 给所有iframe标签添加referrerpolicy="no-referrer"属性，禁止请求携带Referer头
• 废弃form提交逻辑，改为点击按钮直接给iframe的src属性赋值

2. 仅指定img元素自动刷新实现 #

实现逻辑 #

直接移除refreshIt函数中给iframe赋值的代码即可，额外可在img的src后拼接时间戳参数，避免浏览器缓存导致刷新不生效。
注意你需求里指定的img name属性为Graphic1/2/3，需要和代码中DOM获取的名称保持一致。

修复后完整代码 #

<html>
<head>
<script language="JavaScript">
function refreshIt() {
   if (!document.images) return;
   // 仅刷新指定img，添加时间戳避免缓存
   const timestamp = new Date().getTime();
   document.images['Graphic1'].src = chart1.value + '?t=' + timestamp;
   document.images['Graphic2'].src = chart2.value + '?t=' + timestamp;
   document.images['Graphic3'].src = chart3.value + '?t=' + timestamp;
   setTimeout(refreshIt,500); // 每0.5秒刷新一次
}
// 绑定iframe加载事件
function loadIframe(iframeName, inputId) {
    const url = document.getElementById(inputId).value;
    if (url) {
        document.getElementsByName(iframeName)[0].src = url;
    }
}
</script>
</head>
<body onLoad="setTimeout(refreshIt,500)">
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<input type="text" id="chart4" name="chart4"><br>
<input type="text" id="chart5" name="chart5"><br>
<input type="text" id="chart6" name="chart6"><br>
<p></p>
<!-- 替换form为普通按钮，直接触发iframe加载 -->
<button onclick="loadIframe('iframe1', 'chart4')">I Frame 1</button>
<button onclick="loadIframe('iframe2', 'chart5')">I Frame 2</button>
<button onclick="loadIframe('iframe3', 'chart6')">I Frame 3</button>
<iframe name="iframe1" width="350" height="282" referrerpolicy="no-referrer"></iframe>
<iframe name="iframe2" width="350" height="282" referrerpolicy="no-referrer"></iframe>
<iframe name="iframe3" width="350" height="282" referrerpolicy="no-referrer"></iframe>
<p></p>
<!-- img的name修改为需求指定的Graphic1/2/3 -->
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Graphic1">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Graphic2">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Graphic3">
</body>
</html>

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