DVA-C02: How to Fix Browser Blocking JavaScript and Web Fonts from S3 Buckets

Learn how to prevent the browser from blocking JavaScript and web fonts from S3 buckets when hosting multiple client-side web applications on Amazon CloudFront. Find out the best solution for this common issue.

Question

A company hosts a client-side web application for one of its subsidiaries on Amazon S3. The web application can be accessed through Amazon CloudFront from https://www.example.com. After a successful rollout, the company wants to host three more client-side web applications for its remaining subsidiaries on three separate S3 buckets.

To achieve this goal, a developer moves all the common JavaScript files and web fonts to a central S3 bucket that serves the web applications. However, during testing, the developer notices that the browser blocks the JavaScript files and web fonts.

What should the developer do to prevent the browser from blocking the JavaScript files and web fonts?

A. Create four access points that allow access to the central S3 bucket. Assign an access point to each web application bucket.

B. Create a bucket policy that allows access to the central S3 bucket. Attach the bucket policy to the central S3 bucket

C. Create a cross-origin resource sharing (CORS) configuration that allows access to the central S3 bucket. Add the CORS configuration to the central S3 bucket.

D. Create a Content-MD5 header that provides a message integrity check for the central S3 bucket. Insert the Content-MD5 header for each web application request.

Answer

C. Create a cross-origin resource sharing (CORS) configuration that allows access to the central S3 bucket. Add the CORS configuration to the central S3 bucket.

Explanation

The correct answer is C. Create a cross-origin resource sharing (CORS) configuration that allows access to the central S3 bucket. Add the CORS configuration to the central S3 bucket.

This solution will prevent the browser from blocking the JavaScript files and web fonts because it will enable the web applications to request resources from the central S3 bucket, which is in a different origin than the web applications. Cross-origin resource sharing (CORS) is a mechanism that allows web browsers to make requests to servers in different origins (domains, protocols, or ports) than the origin of the current web page. CORS requires the server to send specific HTTP headers that indicate which origins are allowed to access the resources. Amazon S3 supports CORS by allowing you to create a CORS configuration for a bucket. A CORS configuration is an XML document that defines rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) supported for each origin, and other information.

The developer can create a CORS configuration that allows access to the central S3 bucket from the origins of the web applications. The developer can add the CORS configuration to the central S3 bucket by using the AWS Management Console, AWS Command Line Interface (AWS CLI), or AWS SDKs. The developer can also specify which HTTP methods (such as GET or HEAD) and headers are allowed for each origin.

The other options are not optimal or feasible for the following reasons:

A. Creating four access points that allow access to the central S3 bucket and assigning an access point to each web application bucket will not work, as access points are not meant for cross-origin requests. Access points are alternative entry points for accessing data in an S3 bucket. Access points allow you to create different network and security policies for different data access patterns.

B. Creating a bucket policy that allows access to the central S3 bucket and attaching it to the central S3 bucket will not work, as bucket policies are not sufficient for cross-origin requests. Bucket policies are JSON policy documents that you attach to a bucket to control access to the bucket and its objects. Bucket policies can grant or deny permissions based on various conditions, such as IP address, time, or user identity. However, bucket policies do not send the required CORS headers that indicate which origins are allowed to access the resources.

D. Creating a Content-MD5 header that provides a message integrity check for the central S3 bucket and inserting it for each web application request will not work, as Content-MD5 headers are not related to cross-origin requests. Content-MD5 headers are optional headers that provide a base64-encoded 128-bit MD5 digest of the message body. Content-MD5 headers can be used to verify that the data has not been corrupted during transmission.

The latest AWS Certified Developer – Associate DVA-C02 certification actual real practice exam question and answer (Q&A) dumps are available free, which are helpful for you to pass the AWS Certified Developer – Associate DVA-C02 exam and earn AWS Certified Developer – Associate DVA-C02 certification.