标签: data-uri

<img> s XSS上的数据URI是否可以利用?

阅读本文后,我没有一个明确的答案:

http://palizine.plynt.com/issues/2010Oct/bypass-xss-filters/

  • 浏览器会将text/html数据URI有效负载解释为执行标记<img> src的文档<script>吗?

  • 如果没有,那么在第三方HTML中允许数据URI是否安全?

  • 此用例在浏览器级别存在哪些安全机制?

html javascript xss cross-domain data-uri

9
推荐指数
1
解决办法
2951
查看次数

Chrome拒绝从数据uri设置SVG过滤器

我正在尝试创建一个bookmarklet,它将在其加载的整个页面上设置SVG过滤器.为此,它在根元素上设置样式:

document.children[0].style.filter='url(data:image/svg+xml;base64,PHN2ZyB4…#h)';
Run Code Online (Sandbox Code Playgroud)

这在Firefox中运行良好,但Chrome似乎认为它是不安全的跨站点内容,丢弃过滤器,并向控制台输出警告:

不安全的尝试加载URL数据:...来自URL http:...域,协议和端口必须匹配.http://f.codl.fr/1402/0Axcp0.png

这是预期的行为吗?在提交错误之前,我想确定一下.如果是这样,我怎么能这样呢?

这是一个包含书签的测试页面:http://f.codl.fr/1402/hacker/

google-chrome data-uri svg-filters

9
推荐指数
0
解决办法
482
查看次数

如何在Rails4中使用Carrierwave在Blob中保存base64图像?

就像本教程中描述的那样,我将画布转换为DataUrl,将此DataUrl转换为Blob.然后我发出一个ajax post请求,并希望使用Carrierwave将图像保存在数据库中.

这是我的JS代码:

uploadButton.on('click', function(e) {

  var dataURL = mycanvas.toDataURL("image/png;base64;");

  // Get our file
  var file= dataURLtoBlob(dataURL);

  // Create new form data
  var fd = new FormData();

  // Append our Canvas image file to the form data
  fd.append("image", file);

  // And send it
  $.ajax({
    url: "/steps",
    type: "POST",
    data: fd,
    processData: false,
    contentType: false,
  });
});

// Convert dataURL to Blob object
function dataURLtoBlob(dataURL) {

  // Decode the dataURL
  var binary = atob(dataURL.split(',')[1]);

  // Create 8-bit unsigned array …
Run Code Online (Sandbox Code Playgroud)

base64 blob ruby-on-rails carrierwave data-uri

9
推荐指数
2
解决办法
6301
查看次数

如何在Javascript中将图像二进制从API调用转换为数据URI?

我正在使用的Google API仅将图像作为二进制数据传输.

我绝对不知道如何将它放入数据URI中来显示它,感谢您的帮助!

我正在谈论的是这个API调用.

如你所见,它说:

服务器返回照片的字节.

对于调用(它是扩展),我使用chrome_ex_oauth方法.也许我需要在标题中添加一些内容来获取真正的二进制数据,而不是现在出现的字符串......

我需要做的是将生成的二进制文件转换为数据URI,以便我可以显示它.


好的,我从XHR请求中得到了这个

在此输入图像描述

现在,我不太了解二进制的东西.这是以某种方式编码的二进制数据我假设?我试图把它放到btoa和其他base64编码器中,一切都会引发错误.我试图用不同的东西覆盖MySQL类型,并且以某些奇怪的方式改变了"响应",但没有接受数据.

所以现在我有这个代码:

var nxhr = new XMLHttpRequest();
nxhr.onreadystatechange = function (data) {
    if (nxhr.readyState == 4) {
        console.log(nxhr);
    }
};
nxhr.open(method, url, true);
nxhr.setRequestHeader('GData-Version', '3.0');
nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
nxhr.send('Data to send');
Run Code Online (Sandbox Code Playgroud)

其他人有任何想法如何让我这个不可理解的响应数据uri ???

谢谢你的帮助

javascript google-api data-uri

8
推荐指数
2
解决办法
9801
查看次数

如何在Ruby中将数据URI转换为文件

如何将来自FileReader API结果的数据URI转换为可以保存在Ruby文件系统中的图像文件?

我目前要做的是使用base64解码将data_uri字符串转换data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgA...为base 64编码字符串,因为根据此stackoverflow答案,我需要将所有空格实例替换为+.答案是在PHP,但我目前正在研究Ruby和Sinatra所以我不确定它是否仍然适用,但在使用等效代码时:

src = data_uri.gsub! ' ', '+'
src = Base64.decode64(src)
f = File.new('uploads/' + 'sample.png', "w")
f.write(src)
f.close
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

undefined method `unpack' for nil:NilClass
Run Code Online (Sandbox Code Playgroud)

我在这里想要实现的是能够将数据URI转换为文件.

ruby sinatra data-uri

8
推荐指数
1
解决办法
3046
查看次数

为什么数据库img不能复制到剪贴板?

我遇到了一个奇怪的问题.我在页面上有一些从Data URI渲染的图像,我想让我的用户将它们复制到剪贴板.

但是,出于某种原因,Firefox和Chrome似乎都不允许我这样做.

以此页面为例:

<!doctype html>
<html>
   <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>Clipboard Test</title>
</head>
    <body>

    <img id="target" src="data:image/png;base64,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"/>

    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

如果你想试试,可以在这里找到.

右键单击图像并选择"复制图像"似乎不适用于Chrome,Firefox或IE11.然而,右键单击并"将图像另存为..."确实有效.

由于它似乎在所有浏览器中都是一致的,我假设必须有一个故意决定不允许复制这些图像.它与CORS有关 - 因为数据URI有不同的来源吗?

有什么我可以做的,以允许这些图像被复制?

这样做的背景是我试图让我的Web应用程序的用户将SVG图像复制到剪贴板上.我能够将SVG图像转换为PNG数据URI,我甚至可以将其保存在用户的计算机上,但我似乎无法将它们放到剪贴板上.如果有其他/更好的方法来做到这一点,请随意指出它们!

更新似乎这可能与接收应用程序而不是浏览器有关.在看到@ Mi-Creativity的评论之后,我使用其他应用程序进行了重新测试.将这些图像粘贴到MS Paint中似乎确实有效,而将它们粘贴到MS Office应用程序中却没有.不幸的是,这是我的用户的主要用例.

html clipboard html5 svg data-uri

8
推荐指数
1
解决办法
1423
查看次数

IE - IFRAMES/Data Uri

我需要在沙盒视图中显示内容,主要是一个完整的html文档(<html>...</html>).我正在使用带有src datauri的沙盒iframe .

var 
  iframe = document.createElement('iframe'),
  content = '<html><head></head><body><h1>Hello</h1></body></html>'
;
iframe.sandbox = '';
iframe.src = 'data:text/html;charset=utf-8,' + content;
document.body.appendChild(iframe);
Run Code Online (Sandbox Code Playgroud)

不幸的是,Internet Explorer不支持...有没有解决方案/解决方法?

javascript iframe internet-explorer data-uri

8
推荐指数
1
解决办法
1384
查看次数

带有数据 URI 和下载属性的锚点在 iOS/Safari 中不起作用

我构建了一个简单的 Web 应用程序,它canvas使用canvas.toDataURL(). 然后我使用数据 URI 创建一个锚标记,其中包含一个download属性。像这样的东西:

<a href="data:image/jpeg;base64,somedata" download="filename.jpg">Download</a>
Run Code Online (Sandbox Code Playgroud)

这在 Chrome 和 Safari 上的 Android/MacOS 设备上非常有效 - 单击锚点将数据 URI 下载为.jpg文件。

但在 iOS Chrome 上,点击链接没有任何作用。要下载文件,它需要在新选项卡(显示图像)中打开锚点,然后保存图像。

我试过添加一个,target="_blank"但没有达到预期的结果。

有没有办法让 iOS 像 Android/MacOS 一样工作,点击链接启动下载?

html ios data-uri

8
推荐指数
1
解决办法
1402
查看次数

有没有办法在Google图像搜索中索引“Next/Image Component”生成的图像?

我在索引由 Next/Image 组件优化的图像时遇到问题,这些图像位于我的 Next.js 应用程序的公共文件夹中。

我还没有看到任何例子,其中由 Next/Image 组件生成的任何资源/URL(如下所示)已在谷歌图像搜索中建立索引。

这种类型的URL:https://www.example.com/_next/image? url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

尽管 http 标头中具有资源内容类型:image/jpg,但这些图像未在 google 中建立索引的原因是因为 google 需要在根文件/资源​​/URL 位置抓取资源,如下所示:https://www .example.com/images/home/Dog-image-1.jpg

为什么?http 标头是否具有正确的内容类型?因为google需要确保它知道原始资源,因为它不确定Next/Image生成的URL将保留多长时间,并且它希望在其图像索引中避免此类URL或base64以避免404错误搜索引擎要保持满意的用户体验,就需要直接抓取其所在位置的图片资源,并且必须在html代码中抓取。

现在的问题是:

当使用 Next/Image 组件时,如何让 google 抓取我的 img 标签中的根资源/URL。如果这是不可能的,那么 Next/Image 根本不适用于电子商务或其他依赖大量图像搜索流量的图像相关网站,甚至其他网站也不愿意通过这些 URL 共享您的图像。

有人认为 data-src 属性可以解决这个问题或这里的问题https://nextjs.org/docs/api-reference/next/image#minimum-cache-ttl

感谢您的时间。

url data-uri google-image-search next.js nextjs-image

8
推荐指数
1
解决办法
860
查看次数

Chrome - 使用"数据"网址时,右键菜单中的"另存为..."已停用

如果将以下内容粘贴到chrome中的url栏并尝试右键单击 - >另存为...则另存为...将显示为灰色.有什么方法可以阻止它变灰?

网址:

data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0D%0A
Run Code Online (Sandbox Code Playgroud)

google-chrome right-click save-as data-uri

7
推荐指数
1
解决办法
7306
查看次数