Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ruby-on-rails/62.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ruby on rails chrome扩展发布到其他网页的请求_Ruby On Rails_Google Chrome Extension_Cross Domain_Csrf - Fatal编程技术网

Ruby on rails chrome扩展发布到其他网页的请求

Ruby on rails chrome扩展发布到其他网页的请求,ruby-on-rails,google-chrome-extension,cross-domain,csrf,Ruby On Rails,Google Chrome Extension,Cross Domain,Csrf,我是这里的新手,我正在尝试做一个chrome扩展,它将与我的rails应用程序一起工作。这是一个书签应用程序,所以我希望用户能够浏览其他网站,然后通过点击chrome扩展图标将页面添加到书签中,它将发出post请求并将其添加到用户主页 目前,我只能从用户主页上获得这项功能,但不能从任何其他页面获得,这不是很有用。我认为问题在于csrf令牌,当设置为当前选项卡的页面时,它会被设置为当前选项卡的页面,但我认为它需要是用户主页的csrf令牌,才能通过请求?我只是尝试不包括它,但这不起作用,因为它是必需

我是这里的新手,我正在尝试做一个chrome扩展,它将与我的rails应用程序一起工作。这是一个书签应用程序,所以我希望用户能够浏览其他网站,然后通过点击chrome扩展图标将页面添加到书签中,它将发出post请求并将其添加到用户主页

目前,我只能从用户主页上获得这项功能,但不能从任何其他页面获得,这不是很有用。我认为问题在于csrf令牌,当设置为当前选项卡的页面时,它会被设置为当前选项卡的页面,但我认为它需要是用户主页的csrf令牌,才能通过请求?我只是尝试不包括它,但这不起作用,因为它是必需的

manifest.json:

    {
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "permissions" : [
    "tabs", 
    "<all_urls>", 
    "https://*/",
    "http://*/"
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js", "html2canvas.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}
content.js

savePage = () => {
  console.log('save page called');
  var token = document.querySelector('meta[name="csrf- 
    token"]').getAttribute('content');
  var data = {"url":window.location.href, "screenshot":'tempScreen.png', 
    "user_id": 2, "title":document.title};

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://hidden-bastion-43962.herokuapp.com/bookmarks');
  xhr.withCredentials = true;
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('X-CSRF-Token', token);
  xhr.send(JSON.stringify(data));
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = window.location.href;
      console.log(firstHref);
      takeScreenshot();
    }
  }
);

您应该从background.js页面发出任何跨站点请求。 让内容脚本将包含post数据的消息发布到后台页面,并让后台页面发送xhr。
这将避免跨站点/CORS问题。

您应该从background.js页面发出任何跨站点请求。 让内容脚本将包含post数据的消息发布到后台页面,并让后台页面发送xhr。
这将避免跨站点/CORS问题。

你完全正确,我是在反向操作。我改进了它,现在一切都很好,谢谢!你完全正确,我是倒着做的。我改进了它,现在一切都很好,谢谢!
savePage = () => {
  console.log('save page called');
  var token = document.querySelector('meta[name="csrf- 
    token"]').getAttribute('content');
  var data = {"url":window.location.href, "screenshot":'tempScreen.png', 
    "user_id": 2, "title":document.title};

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://hidden-bastion-43962.herokuapp.com/bookmarks');
  xhr.withCredentials = true;
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('X-CSRF-Token', token);
  xhr.send(JSON.stringify(data));
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = window.location.href;
      console.log(firstHref);
      takeScreenshot();
    }
  }
);