相关疑难解决方法(0)

我的应用程序将图像存储在S3上,然后通过Cloudfront代理它们.我很高兴使用新的S3 CORS支持,以便我可以使用HTML5 canvas方法(具有跨源策略),但似乎无法正确配置我的S3和Cloudfront.当我尝试将图像转换为canvas元素时,仍然遇到"Uncaught Error:SECURITY_ERR:DOM Exception 18".

这是我到目前为止所拥有的:

S3

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

CloudFront的

起源

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

行为

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

这里有什么我想念的吗？

更新:刚尝试将标题更改为

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

基于这个问题的Amazon S3 CORS(跨域资源共享)和Firefox跨域字体加载

仍然没有去.

更新:更多信息请求

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

UPDATE

我想也许我的请求不正确,所以我尝试启用CORS

img.crossOrigin = '';

但然后图像没有加载,我得到错误:跨源资源共享策略拒绝跨源图像加载.

在chrome 22&safari 6中.

使用支持CORS的S3存储桶从s3加载图像以在画布中使用(以提取为主要目的),具有以下代码:

<!-- In the html -->
<img src="http://s3....../bob.jpg" /> 

// In the javascript, executed after the dom is rendered
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg";

我观察到以下情况:

1. 禁用缓存
2. 一切正常,两个图像加载

然后在启用缓存的情况下尝试:

1. 启用缓存
2. DOM图像加载,画布图像创建一个dom安全例外

如果我修改代码的javascript部分以附加查询字符串,如下所示:

this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";

一切正常,即使完全启用了缓存.我通过使用http代理继续进行缓存是一个问题,并观察到在失败的情况下,实际上没有从服务器请求图像.

我不得不得出的结论是,图像缓存正在保存原始请求头,然后将其用于后续启用CORS的请求 - 并且由于违反相同的源策略而生成安全性异常.

这是预期的行为吗？

编辑:在Firefox中工作.

Edit2:关于s3存储桶的Cors策略

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

我正在使用大开放,因为我现在只是从我当地的盒子进行测试.这还没有投入生产.

Edit3:更新了cors策略以指定原点

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:5000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

已验证的传出标题

Origin …

我正在尝试让html2render ( http://html2canvas.hertzen.com/ ) 在我的网站上工作。它适用于基本内容 - 但没有任何图像显示（因为它们位于 cdn.domain.com 子域上）。

我一直在阅读，似乎它不喜欢开箱即用的其他域。我找到了几个 PHP 代理脚本：

• https://github.com/brcontainer/html2canvas-php-proxy
• https://github.com/adjdred/html2canvas-proxy-php

我试图让这些继续下去，但我们没有在此服务器上启用curl 。所以，我打算用 Perl 写一些东西。

这是我到目前为止所得到的：

use MIME::Base64;
use File::Slurp;

handle();

sub handle {

    print ('Access-Control-Max-Age:' . 5 * 60 * 1000);
    print ("Access-Control-Allow-Origin: *");
    print ('Access-Control-Request-Method: *');
    print ('Access-Control-Allow-Methods: OPTIONS, GET');
    print ('Access-Control-Allow-Headers *');
    print ("Content-Type: application/javascript");

    #print $IN->header;

    my $url = $IN->param('url');

    $url =~ s|https://cdn.xxx.net|/srv/www/xxx.net/www|g;

    if (-e $url) {

        my $file = read_file($url);

        use JSON;

        my $mime_type;
        if ($url =~ /\.jpe?g$/i) { …