Issues arise with controlling access due to cache-control and canvas properties

Question

Issues arise with controlling access due to cache-control and canvas properties

I am attempting to utilize the browser canvas feature to manipulate images that are hosted on cloudfront. My goal is to configure cloudfront in a way that allows the browser to cache images with cache control set to max-age, while still enabling canvas editing of those images.

Here's an image that I can successfully edit:

Link to editable image

However, here's one that I cannot edit (due to Cross-Origin Resource Sharing policy restrictions):

Link to blocked image

The only difference seems to be the cache-controls header. Any ideas on what might be causing this issue? Thank you.

I am utilizing the node.js knox library for uploading. Here is an example of the headers being used:

var headers = {
  'Content-Length': options.data.length,
  'Vary': 'Accept-Encoding',
  // 'Cache-Control': 'public, max-age=31536000',
  'x-amz-acl': 'public-read',
  'Content-Type': options.type
}

javascript amazon-web-services http-headers amazon-cloudfront cache-control

Answer 1

Answer №1

Yes, I understand that you only want to load the images without saving them back using POST. And it works perfectly!

To see a working example for loading both images, check out this jsbin: here.

var img1 = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Test image - img1
img1.onload = function () {
  ctx.drawImage(img1, 0, 0);
};

img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg';

And here is the HTML code with the canvas:

<canvas id="canvas" width="1000" height="1000"></canvas>

It seems like the issue lies in how you are loading the images, but without seeing your code for that, it's hard to pinpoint the exact problem.

The caching/cross-origin Issue

The problem stems from the difference in behavior between the <img> tag and the Javascript Image object. While you can include images from any source using an <img> tag without restrictions, the same origin policy applies when using the Javascript Image.

When you use <img> tags in your original HTML, the browser fetches the images without sending an Origin header, causing your server not to send CORS headers.

Subsequently, when you switch to the Javascript Image, the browser uses a cached version of the image without CORS headers, resulting in a failed request.

One way to address this would be to first use the Javascript Image and then employ the <img> tag, or eliminate the <img> tag altogether. Another solution could involve always including CORS headers for *, even when no Origin header is present.

You also seem to have an unusual problem in your resizing function, which might require a separate question if you're unable to resolve it on your own.

Answer 2

Yes, I understand that you only want to load the images without saving them back using POST. And it works perfectly!

To see a working example for loading both images, check out this jsbin: here.

var img1 = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Test image - img1
img1.onload = function () {
  ctx.drawImage(img1, 0, 0);
};

img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg';

And here is the HTML code with the canvas:

<canvas id="canvas" width="1000" height="1000"></canvas>

It seems like the issue lies in how you are loading the images, but without seeing your code for that, it's hard to pinpoint the exact problem.

The caching/cross-origin Issue

The problem stems from the difference in behavior between the <img> tag and the Javascript Image object. While you can include images from any source using an <img> tag without restrictions, the same origin policy applies when using the Javascript Image.

When you use <img> tags in your original HTML, the browser fetches the images without sending an Origin header, causing your server not to send CORS headers.

Subsequently, when you switch to the Javascript Image, the browser uses a cached version of the image without CORS headers, resulting in a failed request.

One way to address this would be to first use the Javascript Image and then employ the <img> tag, or eliminate the <img> tag altogether. Another solution could involve always including CORS headers for *, even when no Origin header is present.

You also seem to have an unusual problem in your resizing function, which might require a separate question if you're unable to resolve it on your own.

Issues arise with controlling access due to cache-control and canvas properties

Answer №1

The caching/cross-origin Issue

Similar questions

Transferring the values of JavaScript objects to HTML as strings

Analyzing the path of the cursor

HTML is being incorrectly rendered by the Express framework

What are some tips for increasing your points on the journey using Here Maps?

I often struggle with creating social media buttons using Material UI

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

What could be the reason for my mongoose model failing to save in mongodb?

Using regular expressions to add a string before each occurrence

Numerous Fascinating Challenges with React Native

Attempting to bundle js files using Browserify, but encountering issues with require('jquery-datetimepicker') not functioning correctly

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

The React Testing Library encountered an error: TypeError - actImplementation function not found

Utilize the findIndex method to search for an element starting at a designated index

Error: Issue with hook function call detected. Struggling to locate exact source in React JS

Tips for displaying negative numbers as positive in AngularJS

What is the best way to ensure an observable has finished before retrieving a value?

Angular allows for dynamic sourcing of iframes

Tips for placing a div within a curved div?

Angular 1.5.0 - What is the reason for factory being invoked only once?

Arranging buttons that are generated dynamically in a vertical alignment