尝试使用 javascript 下载所有谷歌搜索图像

Question

我正在尝试制作一个脚本，用于下载所有 Google 搜索图像以制作我的 ml 项目的数据集。我正在关注this tutorial 下载高分辨率图像，但突然出现错误提示：

拒绝加载脚本“https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”，因为它违反了以下内容安全策略指令：“script-src 'report-sample' 'nonce-Q6xQOKx7e+e0TlGbQFPX3g' 'unsafe-inline'”。请注意，'script-src-elem' 没有显式设置，因此 'script-src' 用作备用

我们将不胜感激。我通过将其粘贴到 javascript 控制台来运行此代码。谢谢！

var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

// grab the URLs
var urls = $('.rg_di .rg_meta').map(function() {
  return JSON.parse($(this).text()).ou;
});

// write the URls to file (one per line)
var textToSave = urls.toArray().join('\n');
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'urls.txt';
hiddenElement.click();

Answer 1

您正在使用 jQuery 来完成可以在本机 javascript 中完成的事情。

document.querySelectorAll 主要与 jQuery 一样使用选择器。它不返回一个数组，而是一个（在我看来）笨拙的NodeList。

为了让它正确迭代，我更喜欢将spread 放入一个数组中，然后在其上调用forEach。

[...document.querySelectorAll('.foo')].forEach((element, index) => {
   console.log(element.innerText);
});

<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bal</div>

另外，目前获取数据的方法不同。

在所有需要触发点击的图片上。
这将激活 javascript 事件处理程序，该处理程序将设置图像祖父母的 href。
您需要让 google 事件处理程序首先运行，因此我们分离执行流程的其余部分，以便 google 脚本可以完成它并更新 DOM。我们使用setTimeout() 来做到这一点。
然后，当 google 脚本运行时，DOM 元素已更新，我们计划的超时有机会运行，现在 href 已被填充。

在点击之前，链接如下所示：

点击后

我们现在看到 href 已被填充。输入的网址是：

https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2.png&imgrefurl=https%3A%2F%2Fwww.researchgate.net%2Ffigure%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2_fig5_305983658&tbnid=_UuLNMPCQAT0uM&vet=12ahUKEwjhsu31zcnoAhWbgKQKHR3jAdUQMygAegUIARDTAQ..i&docid=LThLi5REXoitfM&w=428&h=428&q=hmm%20test&ved=2ahUKEwjhsu31zcnoAhWbgKQKHR3jAdUQMygAegUIARDTAQ

在这个 url 中，我们在 imgurl= 之后看到以 https 开头的内容。这是我们的目标图片网址，但它已经过 urlencoded 并且是较大网址的一部分。
所以我们用一些简单的子字符串操作来操作字符串。

那我们还有奇怪的字符

https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-method -left-Test-1-right-Test-2.png

为此我们可以使用decodeURIComponent() 将其转换为普通的url

document.write(decodeURIComponent('https%3A%2F%2Fwww.researchgate.net%2Fprofile%2FJerome_Droniou%2Fpublication%2F305983658%2Ffigure%2Ffig5%2FAS%3A668650201690119%401536430039650%2FMesh-patterns-for-the-tests-using-the-HMM-method-left-Test-1-right-Test-2.png'))

然后我们将它添加到我们的数组中。

当我们处理完所有事情后，我们会创建 urls 文件并下载它。

var urls = [];
var count = 0;
[...document.querySelectorAll('.rg_i')].forEach((element, index) => {
   let el = element.parentElement.parentElement;
   el.click();
   count++;
   setTimeout(() => {
       let google_url = el.href;

       let start = google_url.indexOf('=' , google_url.indexOf('imgurl'))+1;
       let encoded = google_url.substring(start, google_url.indexOf('&', start));
       let url = decodeURIComponent(encoded);
       urls.push(url);
       console.log(count);
       if(--count == 0) {
          let textToSave = urls.join('\n');
          let hiddenElement = document.createElement('a');
          hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
          hiddenElement.target = '_blank';
          hiddenElement.download = 'urls.txt';
          hiddenElement.click();
       }

   }, 50);

});

Answer 2

拒绝加载脚本是因为内容安全策略。在 Firefox 中，您可以通过 url 栏中的 about:config 禁用 csp，并将 security.csp.enable 设置为 false。

我尝试在 Firefox 控制台中使用以下代码进行测试：

    javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');

        jQuery(".rg_i").get().forEach(function(entry, index, array) {
        var src = jQuery('.rg_i').attr('src');
        console.log("src1: " + src);
        });

        var src = jQuery('.rg_i').attr('src');
        console.log("src2: " + src);
    };
    document.head.appendChild(e);

})(document.createElement('script'), '//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js');

祝你好运:)

Answer 3

我认为您需要添加以下内容：

<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

将其添加到策略中，有很多不同的方法（请参阅文档）。