文档

学习

v.Latest

入门指南

配置TinaCMS

内容查询

TinaCloud

自托管

高级

新手入门系列

什么是新手入门系列？

1. 创建你的TinaCMS站点

2. 实时编辑功能

3. 内容模型

4. 网站构建体验

技术指南

文档

学习

v.Latest

Documentation

内容安全策略 (CSP) 配置

在此页面上

概述

内容安全策略 (CSP) 是一种安全标准，有助于防止跨站脚本 (XSS)、点击劫持和其他代码注入攻击。在使用 TinaCMS 时，您需要配置 CSP 头以允许连接到 TinaCMS 服务。

必需的 CSP 指令

TinaCMS 需要以下 CSP 指令才能正常运行：

图像来源

TinaCMS 需要访问其资产交付网络以加载图像：

"img-src 'self' data: assets.tina.io;"

连接来源

TinaCMS 需要连接到多个服务以进行身份验证和内容交付：

"connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io;"

identity.tinajs.io - 身份验证和身份服务
content.tinajs.io - 内容 API 和数据层
assets.tinajs.io - 资产管理和交付

实现示例

Next.js 配置

应用路由器 (Next.js 13+)

在 next.config.js 中添加 CSP 头：

const baseCsp = [
    "default-src 'self';",
    "img-src 'self' data: assets.tina.io;",
    "font-src 'self' data: fonts.gstatic.com;",
    "object-src 'none';",
    "frame-src 'none';",
    "worker-src 'self' blob:;",
    "frame-ancestors 'none';",
    "base-uri 'self';",
    "connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io;"
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: baseCsp.join(' '),
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

页面路由器

对于页面路由器，您也可以在 next.config.js 中使用上述相同的方法配置 CSP。

或者，在中间件中设置 CSP 头：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  
  const csp = [
    "default-src 'self'",
    "img-src 'self' data: assets.tina.io",
    "connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io",
    // ... 其他指令
  ].join('; ');
  
  response.headers.set('Content-Security-Policy', csp);
  
  return response;
}

Netlify 配置

在 netlify.toml 中添加 CSP 头：

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; img-src 'self' data: assets.tina.io; connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io; font-src 'self' data: fonts.gstatic.com; object-src 'none'; frame-src 'none'; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self';"

Vercel 配置

在 vercel.json 中添加头：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; img-src 'self' data: assets.tina.io; connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io; font-src 'self' data: fonts.gstatic.com; object-src 'none'; frame-src 'none'; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self';"
        }
      ]
    }
  ]
}

Apache 配置

添加到您的 .htaccess 文件：

<IfModule mod_headers.c>
  Header set Content-Security-Policy "default-src 'self'; img-src 'self' data: assets.tina.io; connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io; font-src 'self' data: fonts.gstatic.com; object-src 'none'; frame-src 'none'; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self';"
</IfModule>

Nginx 配置

添加到您的 nginx 配置：

add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: assets.tina.io; connect-src 'self' identity.tinajs.io content.tinajs.io assets.tinajs.io; font-src 'self' data: fonts.gstatic.com; object-src 'none'; frame-src 'none'; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self';" always;

自托管注意事项

如果您使用自托管 TinaCMS 设置，您可能需要调整这些 CSP 指令：

将 TinaCloud 域替换为您自己的后端 URL
确保 connect-src 包含您的内容 API 端点
将任何自定义媒体存储域添加到 img-src

自托管示例：

const baseCsp = [
    "default-src 'self';",
    "img-src 'self' data: your-media-storage.example.com;",
    "connect-src 'self' your-backend.example.com;",
    // ... 其他指令
];