R Shiny自定义URL下iframe中启用JavaScript的方法咨询

方案1：调整ShinyApp的响应头，允许嵌入并授予权限 #

在app.R里通过httpuv的响应钩子修改HTTP头，让自定义域名能嵌入ShinyApp，同时配置Content Security Policy（CSP）支持脚本执行和地理位置访问：

library(shiny)
library(httpuv)

# 添加响应钩子修改HTTP头
addResponseHook(function(req, res) {
  # 替换为你的自定义URL域名，生产环境别用*，避免恶意嵌入
  res$setHeader("X-Frame-Options", "ALLOW-FROM https://your-custom-url.com")
  # 配置CSP，放开必要权限
  res$setHeader("Content-Security-Policy", 
                "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; connect-src 'self'; geolocation 'self'")
})

ui <- fluidPage(
  # 示例：添加获取地理位置的JavaScript
  tags$script(HTML("
    navigator.geolocation.getCurrentPosition(function(pos) {
      console.log('纬度:', pos.coords.latitude, '经度:', pos.coords.longitude);
      // 将位置信息传给Shiny服务器
      Shiny.setInputValue('user_location', {lat: pos.coords.latitude, lng: pos.coords.longitude});
    });
  "))
)

server <- function(input, output, session) {
  # 监听并处理地理位置输入
  observeEvent(input$user_location, {
    print(input$user_location)
  })
}

shinyApp(ui, server)

注意事项：

• X-Frame-Options中的域名必须与自定义URL完全匹配，生产环境禁止用*
• CSP中的'unsafe-inline'和'unsafe-eval'是适配Shiny自身的内联脚本需求，若你的JS是外部文件，可替换为对应域名以提升安全性
• geolocation 'self'用于授权当前域名调用地理位置API

方案2：检查嵌入iframe的sandbox属性 #

如果自定义URL的iframe设置了sandbox属性，可能限制了脚本执行或权限请求，需确保sandbox包含以下必要属性：

• allow-scripts：允许执行JavaScript
• allow-geolocation：允许访问地理位置
• allow-same-origin：同域场景下需保留同源权限

示例iframe代码：

<iframe src="https://your-shiny-app-url.com" 
        sandbox="allow-scripts allow-geolocation allow-same-origin"
        width="100%" height="600"></iframe>

方案3：跨域场景下用Shiny消息机制协调权限请求 #

若ShinyApp与自定义URL跨域，直接在Shiny内请求地理位置会被浏览器拦截，可通过父页面代为请求并传递结果：

1. 在ShinyApp的UI中添加脚本，向父页面发送请求：

tags$script(HTML("
  // 向父页面发送地理位置请求（替换为你的自定义URL）
  window.parent.postMessage({type: 'request_geolocation'}, 'https://your-custom-url.com');
  
  // 监听父页面返回的结果
  window.addEventListener('message', function(event) {
    if (event.origin === 'https://your-custom-url.com' && event.data.type === 'geolocation_result') {
      Shiny.setInputValue('user_location', event.data.location);
    }
  });
"))

2. 在自定义URL的父页面中添加脚本，处理请求并返回结果：

<script>
window.addEventListener('message', function(event) {
  if (event.origin === 'https://your-shiny-app-url.com' && event.data.type === 'request_geolocation') {
    navigator.geolocation.getCurrentPosition(function(pos) {
      event.source.postMessage({
        type: 'geolocation_result',
        location: {lat: pos.coords.latitude, lng: pos.coords.longitude}
      }, event.origin);
    });
  }
});
</script>

关键提醒 #

• 跨域使用postMessage时，origin参数必须严格匹配，避免安全风险
• 浏览器对地理位置API有强制要求，必须在HTTPS环境下使用（本地http://localhost开发除外）
• 生产环境尽量收紧CSP权限，优先使用外部脚本替代内联脚本，可通过htmltools::htmlDependency加载外部JS文件

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