Jira和Confluence集成后，前端怎么在Vue里安全地嵌入Confluence页面？

Good“星瑶提问于 2026-03-01 13:26:23 阅读 14

工具

我们团队最近把Jira和Confluence打通了，现在想在内部Vue项目里直接嵌入Confluence的某个文档页面。但用iframe加载时老是被CSP拦截，提示“Refused to frame”。

试过加X-Frame-Options和Content-Security-Policy头，但Confluence那边好像不允许自定义这些。有没有其他办法？比如用Atlassian的Forge或者OAuth代理？

<template>
  <div>
    <iframe 
      :src="confluenceUrl" 
      width="100%" 
      height="600"
      frameborder="0">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      confluenceUrl: 'https://ourcompany.atlassian.net/wiki/spaces/PROJ/pages/123456'
    }
  }
}
</script>

Jira

我来解答赞 1 收藏

反馈

1 条解答

司徒志鸣 Lv1

这个问题我之前踩过坑，Atlassian Cloud默认禁止iframe嵌入，而且你改不了它的CSP配置。

给你三个方案，按推荐程度排序。

方案一，最优雅的做法是用Confluence REST API拉取内容自己渲染。这样完全绕过iframe限制，还能自定义样式。

// 封装一个获取Confluence页面内容的方法

async function fetchConfluenceContent(pageId) {

  const apiBase = 'https://your-company.atlassian.net/wiki/rest/api/content';

  

  const response = await fetch(${apiBase}/${pageId}?expand=body.storage,version, {

    headers: {

      'Authorization': Bearer ${yourApiToken},

      'Accept': 'application/json'

    }

  });

  

  if (!response.ok) throw new Error('获取页面失败');

  

  const data = await response.json();

  return {

    title: data.title,

    content: data.body.storage.value,

    version: data.version.number

  };

}

Vue组件里这样用：

注意一定要用DOMPurify做XSS过滤，Confluence的HTML内容不能直接信任。

方案二，如果你非要iframe，只能走后端代理。写个简单的代理服务：

// Node.js代理示例

const express = require('express');

const { createProxyMiddleware } = require('http-proxy-middleware');



const app = express();



app.use('/confluence-proxy', createProxyMiddleware({

  target: 'https://your-company.atlassian.net/wiki',

  changeOrigin: true,

  pathRewrite: { '^/confluence-proxy': '' },

  onProxyRes: (proxyRes) => {

    proxyRes.headers['x-frame-options'] = 'ALLOWALL';

    delete proxyRes.headers['content-security-policy'];

  }

}));



app.listen(3000);

然后iframe的src改成你的代理地址。但这方案比较丑，维护成本高。

方案三，Forge确实可以做，但开发成本太高了，除非你本来就要深度集成Atlassian生态，否则杀鸡用牛刀。

建议直接用方案一，API拉取内容自己渲染，干净利落。API Token去Atlassian账户设置里生成就行，记得别提交到代码仓库。

2026-03-01 14:05

Jira和Confluence集成后，前端怎么在Vue里安全地嵌入Confluence页面？

{{ pageData.title }}