Harinder Harinder - 1 month ago 11
PHP Question

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

Answer

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.