TinyMCE 自托管，无法加载字体 - 访问被拒绝 (403)答案

【问题标题】：TinyMCE self-hosted, font cannot load - access denied (403)TinyMCE 自托管，无法加载字体 - 访问被拒绝 (403)
【发布时间】：2019-01-09 10:44:27
【问题描述】：

我正在 AWS S3 存储桶上设置 TinyMCE 自托管实例。编辑器只能从特定域加载，因此我正在尝试为此设置存储桶策略。但我无法让它正常工作。

我的 S3 存储桶策略：

{
    "Version": "2012-10-17",
    "Id": "<some-id>",
    "Statement": [
        {
            "Sid": "<some-id>",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://127.0.0.1:3000/*",
                        "https://127.0.0.1:3000/*"
                    ]
                }
            }
        }
    ]
}

我在存储桶上的 CORS 设置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

通过这些设置，我可以从 http://127.0.0.1:3000/ 的存储桶中加载 TinyMCE 编辑器，但编辑器无法加载 tinymce.woff 和 tinymce.ttf。这样做会给net::ERR_ABORTED 403 (Forbidden)。所以我认为字体请求的来源不是'http(s)://127.0.0.1:3000/'。

TinyMCE 添加的用于获取字体的请求头是：

Origin: http://127.0.0.1:3000
Referer: https://<bucket-location>.amazonaws.com/<bucket-name>/tinymce/js/tinymce/skins/lightgray/skin.min.css
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

TinyMCE在我的应用中的配置是：

export const editor = {
    elementpath: false, // Disable html display in bottom bar ('p >> span' for example)
    branding: false, // Disable 'powered by TinyMCE' text
    height: '100%',
    resize: false, // Disable editor resize
    protocol: 'https', // Load assets via HTTPS | <--- Changing this does not work
}

有谁知道我在这里做错了什么？

字体请求中出现的Origin: http://127.0.0.1:3000 标头不出现在获取编辑器请求中。这就是为什么我认为请求不是来自http://127.0.0.1:3000。

没有字体的编辑器如下所示，所以需要字体：

【问题讨论】：

标签： amazon-web-services amazon-s3 http-headers tinymce

【解决方案1】：

问题在于 S3 存储桶上的 TinyMCE 实例正在加载位于同一个 S3 存储桶上的资源，但我只允许从其他域访问该存储桶（通过存储桶策略）。

因此，TinyMCE 获取其字体的请求被拒绝。这可以通过将存储桶 url 添加到允许的来源来轻松解决，以便存储桶可以向自身发出请求。

我更新的存储桶策略：

{
    "Version": "2012-10-17",
    "Id": "<some-id>",
    "Statement": [
        {
            "Sid": "<some-id>",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://<bucket-location>.amazonaws.com/<bucket-name>/*", // <-- This is new
                        "http://127.0.0.1:3000/*",
                        "https://127.0.0.1:3000/*"
                    ]
                }
            }
        }
    ]
}

【讨论】：