CODEWITHSUNDEEP
phpamazon-web-servicessvgamazon-s3
Harinder
Harinder

Reputation: 1257

S3 bucket policy - Font not displaying on website

Hi i am trying to get data from s3 on my site, every thing is working good, but fonts are not displaying. Here is my policy

{
    "Version": "2008-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originated from 54.148.239.58",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://s3-us-west-2.amazonaws.com/bucket/*",
                        "http://54.148.239.58/*"
                    ]
                }
            }
        }
    ]
}

Output:- http://54.148.239.58/s3_file_exit_ck1.php?link=663&page=4

I don't know what am i doing wrong.

If i remove https://s3-us-west-2.amazonaws.com/bucket/* from policy .svg files don't display.

But this is not working,

@font-face {
    font-family: ZapfDingbatsStd_2b4;
    src: url("https://s3-us-west-2.amazonaws.com/htmlmanuals/663/fonts/ZapfDingbatsStd_2b.woff") format("woff");
}

it work on localhost.

please help

Upvotes: 0

Views: 1759

Answers (1)

John Rotenstein
John Rotenstein

Reputation: 269826

According to the console in my web browser, when I access your page it triggers an error message:

Font from origin 'https://s3-us-west-2.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://54.148.x.x' is therefore not allowed access.

It appears that a page from one domain (s3-us-west-2.amazonaws.com) is trying to reference data from another domain (54.148.x.x). This is triggering Cross-Origin Resource Sharing (CORS) checks within the browser.

You will need to configure CORS rules to permit access.

From the Cross-Origin Resource Sharing (CORS) documentation:

Cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. With CORS support in Amazon S3, you can build rich client-side web applications with Amazon S3 and selectively allow cross-origin access to your Amazon S3 resources.

You'll need to add a policy to your S3 bucket to allow pages from 54.148.x.x to access bucket resources.

Upvotes: 2

Related Questions