Question

我要在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的原因。

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

Answer 1

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

由于这个原因，TinyMCE提出的获取其字体的请求被拒绝。通过将存储段网址添加到允许的来源中，可以轻松解决此问题，以便存储段可以向自身发出请求。

我更新的存储桶策略：

{
    "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自托管字体无法加载-访问被拒绝（403）

1 个答案: