Chrome 选择iframe元素-“阻止来源为“http://localhost:3000”的帧访问跨来源帧”[重复]

mo49yndu  于 2023-03-21  发布在  Go
关注(0)|答案(1)|浏览(207)

此问题在此处已有答案

Cross domain iframe issue(5个答案)
3小时前关门了。
我尝试访问一个TradingView股票图表小部件(https://www.tradingview.com/widget/advanced-chart/),它加载在iframe中。目标是在加载后以编程方式在小部件的canvas标签上绘制,但我收到以下错误:
已阻止源为“http://localhost:3000”的帧访问跨源帧
我基本上尝试了所有的答案:How to enable cors nodejs with express?,但我认为这可能是一个不同的上下文比试图访问一个iframe。我看到了一些其他信息使用postMessage,但我也不认为这是相关的与HTML元素交互。
下面是完整的代码,它是draw函数中产生错误的最后一行。

索引.js

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors())

app.get('/', (req, res, next) => {
    res.sendFile(__dirname + '/index.html');
});

app.get('/test', (req, res, next) => {
    res.send("success")
});

const port = 3000
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

索引.html

<html>
</script>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="technical-analysis-chart-demo"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL stock chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "container_id": "technical-analysis-chart-demo",
  "width": "100%",
  "height": "100%",
  "autosize": true,
  "symbol": "AAPL",
  "interval": "D",
  "timezone": "exchange",
  "theme": "light",
  "style": "1",
  "toolbar_bg": "#f1f3f6",
  "withdateranges": true,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "save_image": false,
  "studies": [
    "ROC@tv-basicstudies",
    "StochasticRSI@tv-basicstudies",
    "MASimple@tv-basicstudies"
  ],
  "show_popup_button": true,
  "popup_width": "1000",
  "popup_height": "650",
  "locale": "en"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

<script>

    function draw() {

        var elem = document.querySelector('#technical-analysis-chart-demo > div > div > iframe');
        console.log(elem.contentWindow)
        console.log(elem.contentWindow.querySelector("div"))
    }

    window.setTimeout(draw, 3000);
    
</script>script>

</html>

我想知道是否有一个解决方案,如果没有,我想知道是否可以覆盖另一个画布上的小部件,但仍然允许用户与小部件在同一时间进行交互。

fnx2tebb

fnx2tebb1#

这似乎是一个CSP的问题,他们已经指定了哪些域可以以何种方式交互,并且不允许您的内联脚本与iframe交互,所以这个解决方案是不可能的。
我对iframe不太熟悉,无法回答您是否可以使用覆盖并将事件传递给iframe的问题。我可能会调查数据来自何处,以及是否可以通过跨域调用没有任何问题的端点获得数据,并自己制作这个 Jmeter 板。

相关问题