TinyMCE self-hosted，字体无法加载 - 访问被拒绝 (403)

Question

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

我的 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 添加的获取字体的请求 header 是：

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 header NOT 出现在提取编辑器请求中。这就是为什么我认为请求不是来自 http://127.0.0.1:3000.

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

Answer 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/*"
                    ]
                }
            }
        }
    ]
}

TinyMCE self-hosted，字体无法加载 - 访问被拒绝 (403)

TinyMCE self-hosted, font cannot load - access denied (403)

tinymce

amazon-s3

amazon-web-services

http-headers