Shiny框架中Iframe无法加载网站显示空白页问题求助

Hey，我来帮你搞定这个iframe空白的坑！你遇到的问题其实很常见——像Google这类主流网站都设置了X-Frame-Options安全响应头，这个头的作用就是禁止自己的页面被其他域名的网站嵌入iframe，所以你的Shiny app加载它的时候，浏览器会直接阻止内容显示，自然就空白了。

你可以打开浏览器的开发者工具（按F12，切换到Console标签），就能看到类似这样的报错：

Refused to display 'https://www.google.co.in/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

这就实锤了是网站的安全限制导致的。那怎么验证你的代码本身没问题呢？换一个允许被嵌入的站点就行，比如https://example.com，这是专门用来做测试的静态站点，没有这类限制。修改后的代码如下：

rm(list = ls())
library(shiny)
members <- data.frame(name=c("Name 1", "Name 2"), nr=c('BCRA1','FITM2'))
ui <- fluidPage(titlePanel("Getting Iframe"),
                mainPanel(fluidRow(
                  htmlOutput("my_test")
                )
                )
)
server <- function(input, output) {
  output$my_test <- renderUI({
    # 替换为允许嵌入的测试站点，同时添加frameborder=0让样式更干净
    tags$iframe(src='https://example.com/', height=600, width=535, frameborder=0)
  })
}
shinyApp(ui, server)

运行这段代码，你就能看到iframe正常加载内容了。

另外再给你几个实用提示：

• 如果你要嵌入自己的网站，可以在服务器端配置响应头，添加X-Frame-Options: ALLOW-FROM 你的Shiny app域名（或者更灵活的Content-Security-Policy: frame-ancestors 你的域名），来允许嵌入；
• 遇到前端显示问题时，浏览器开发者工具是你的最佳帮手，Console里的报错信息能直接告诉你问题根源；
• 不是所有第三方网站都支持iframe嵌入，在尝试前可以先查一下对方的网站政策或者用在线工具检测它的X-Frame-Options设置。

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