I have a Microsoft Edge extension which blocks specific URLs and redirect the browser to another page where the user click a button and it redirects back to the original page.
The extension sends the original URL in the redirection URL and it is used when the target page redirect back to it.
My problem, sometime the original page sends not its own URL but a jpg image on it. It happens when the original page load a bit slowly in the browser.
I don't understand this error.
//background.js
const apps = [
['ABCD', 'abcd']
];
const triggerUrls = [
"http://abcd/*"
];
function logURL(requestDetails) {
const domain = (new URL(requestDetails.url)).hostname.replace('www.','').toLowerCase();
const partDomain = apps.findIndex(u => domain.toUpperCase().split('.')[0].includes(u[0]));
chrome.cookies.get({ 'url': requestDetails.url.toLowerCase(), 'name': 'status' },
function(data){
if (data === null) {
if (partDomain > -1) {
chrome.cookies.set({
url: requestDetails.url.toLowerCase(),
name: "status",
value: "opened"
});
var backUrl = requestDetails.url;
const url = 'http://warning.xx/?title=' + apps[partDomain][0] + '&url=' + backUrl;
chrome.tabs.update( requestDetails.tabId, { url: url} );
}
}
}
);
}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: triggerUrls},
["blocking"]
);
Related
I've tried researching other threads here on SO and other forums, but still can't overcome this issue. I'm generating a presigned post to S3 and trying to upload a file to it using these headers, but getting a 403: Forbidden.
Permissions
The IAM user loaded in with Boto3 has permissions to list, read and write to S3.
CORS
CORS from all origins and all headers are allowed
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"POST",
"PUT"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
The code
The code is based on Python in Django as well as Javascript. This is the logic:
First the file is retrieved from the HTML, and used to call a function for retrieving the signed URL.
(function () {
document.getElementById("file-input").onchange = function () {
let files = document.getElementById("file-input").files;
let file = files[0];
Object.defineProperty(file, "name", {
writeable: true,
value: `${uuidv4()}.pdf`
})
if (!file) {
return alert("No file selected");
}
getSignedRequest(file);
}
})();
Then a GET request is sent to retrieve the signed URL, using a Django view (described in the next section after this one)
function getSignedRequest(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/sign_s3?file_name=" + file.name + "&file_type=" + file.type)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText)
uploadFile(file, response.data, response.url)
}
else {
alert("Could not get signed URL")
}
}
};
xhr.send()
}
The Django view generating the signed URL
def Sign_s3(request):
S3_BUCKET = os.environ.get("BUCKET_NAME")
if (request.method == "GET"):
file_name = request.GET.get('file_name')
file_type = request.GET.get('file_type')
s3 = boto3.client('s3', config = boto3.session.Config(signature_version = 's3v4'))
presigned_post = s3.generate_presigned_post(
Bucket = S3_BUCKET,
Key = file_name,
Fields = {"acl": "public-read", "Content-Type": file_type},
Conditions = [
{"acl": "public-read"},
{"Content-Type": file_type}
],
ExpiresIn = 3600
)
return JsonResponse({
"data": presigned_post,
"url": "https://%s.s3.amazonaws.com/%s" % (S3_BUCKET, file_name)
})
Finally the file should be uploaded to the bucket (this is where I'm getting the 403 error)
function uploadFile(file, s3Data, url) {
let xhr = new XMLHttpRequest();
xhr.open("POST", s3Data.url)
let postData = new FormData()
for (key in s3Data.fields) {
postData.append(key, s3Data.fields[key])
}
postData.append("file", file)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 204) {
document.getElementById("cv-url").value = url
}
else {
alert("Could not upload file")
}
}
};
xhr.send(postData)
}
The network request
This is how the network request looks in the browser
#jellycsc helped me. I had to open up the BlockPublicAcl option for the bucket for it to work.
The URL that you should be using in the upload is supposed to be the one that the presigned response has. Don't just upload whatever url you want.
Update your response to be:
return JsonResponse({
"data": presigned_post,
"url": presigned_post.url
})
Specifically the url you are using looks like:
https://BUCKTET_NAME.s3.amazonaws.com/KEY_PATH
When it should look like:
https://s3.REGION.amazonaws.com/BUCKET_NAME
However looking at your code this is what it should be doing, but your screen shot from inspector says otherwise. Why does the url in the network request NOT match the url that was returned by the create_presigned_post request?
I want to server dynamic pages using url without controller and action on the basis of page title
default url : domain.com/pages/details/1
I want this to be server as
domain.com/title-of-dynamic-page-in-db-space-replaced-with-dash
domain.com/about-us
domain.com/contact-us
if I am doing this without dash than routing will confuse with controller name
thats why I added dash - for dynamic pages
my action looks like this
// GET: Pages/View/5
public ActionResult View(string id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Page page = db.Pages.First(p => p.name_english == id.Replace("-"," "));
if (page == null)
{
return HttpNotFound();
}
}
my routes are
routes.MapRoute(
name: "aaaaa",
url: "{id}",
defaults: new { controller = "pages", action = "view" },
constraints: new { id = #"^[A-Za-z\d-]+$" } //*********help needed in this line ******************************
);
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
above Constrain ^[A-Za-z\d-]+$
accepts alpha(optional) numeric(optional) and dash(optional)
while I need alpha(optional) numeric(optional) and dash(*mandatory*)
this way routing engine will not confuse page title with controller/action as I will make sure my name of dynamic page will contain space(i m replacing with dash)
and my controller/action will not be named contained dash
also tell me, is this approach ok or not, is there any other optimized solution for this?
I hope the following snippet will work for you.
routes.MapRoute(
name: "aaaaa",
url: "{id}",
defaults: new { controller = "pages", action = "view" },
constraints: new { id = #"^([-]*[a-zA-Z0-9]*-[a-zA-Z0-9]*[-]*)+$" } //*********this should work**
);
//---------------------------------------
// ^([-]*[a-zA-Z0-9]*-[a-zA-Z0-9]*[-]*)+$
//---------------------------------------
I have made a few Django projects after having read the tutorial but I am by no means an expert in Django.
I am trying to take a screenshot of the current page and store it (if one does not exist).
To achieve this, we require a few things:
function to get screen shot of current page
function to async post this image to a view which should store it
view that stores the posted image
However, the screen shot function results in a Blob and I am having trouble getting a Django view to properly handle this.
A demo project is available here: https://gitlab.com/SumNeuron/so_save_blob
Function for screenshot
const screenshot = (function() {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype
|| nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function (el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function (e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function capturePage(){
urlsToAbsolute(document.images);
urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
var screenshot = document.documentElement.cloneNode(true);
var b = document.createElement('base');
b.href = document.location.protocol + '//' + location.host;
var head = screenshot.querySelector('head');
head.insertBefore(b, head.firstChild);
screenshot.style.pointerEvents = 'none';
screenshot.style.overflow = 'hidden';
screenshot.style.webkitUserSelect = 'none';
screenshot.style.mozUserSelect = 'none';
screenshot.style.msUserSelect = 'none';
screenshot.style.oUserSelect = 'none';
screenshot.style.userSelect = 'none';
screenshot.dataset.scrollX = window.scrollX;
screenshot.dataset.scrollY = window.scrollY;
var script = document.createElement('script');
script.textContent = '(' + addOnPageLoad_.toString() + ')();';
screenshot.querySelector('body').appendChild(script);
var blob = new Blob([screenshot.outerHTML], {
type: 'text/html'
});
return blob;
}
return capturePage
})()
Function to async post Blob
function setupAjaxWithCSRFToken() {
// using jQuery
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
// set csrf header
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
}
function asyncSubmitBlob( url, blob ) {
var fd = new FormData();
fd.append('image', blob);
$.ajax({
url: url,
type: "POST",
data: fd,
contentType: false,
processData: false,
success: function(response){ console.log(response) },
error: function(data){ console.log(data) }
})
}
So to submit a screenshot of the current page:
setupAjaxWithCSRFToken()
const page = window.location.pathname;
const blob_url = "{% url 'my-app:post_blob' 'REPLACE' %}".replace(/REPLACE/,page == '/' ? '' : page)
asyncSubmitBlob( blob_url, screenshot() )
View to store the posted blob image
urls.py
...
from django.urls import include, path
...
app_name='my-app'
url_patterns=[
...
path('post_blob/', views.post_blob, {'page':'/'},name='post_blob'),
path('post_blob/<page>', views.post_blob,name='post_blob'),
...
]
views.py
from .models import PageBlob
...
def post_blob(request, page):
if request.FILES: # save screenshot of specified page
try:
pb = PageBlob.objects.all().filter(page=page))
if not pb.count():
pb = PageBlob()
pb.page = page
pb.blob = request.FILES['image']
pb.save()
return HttpResponse('Blob Submitted')
except:
return HttpResponse('[App::my-app]\tError when requesting page_image({page})'.format(page=page))
else: # return screenshot of requested page
try:
# get objects storing screenshot for requested page
pb = PageBlob.objects.all().filter(page=page)
# if one exists
if pb.count():
pb = pb[0]
## this just returns the string literal "blob"
return HttpResponse(str(pb.blob))
return HttpResponse('[App::my-app]\tNo blob for {page}'.format(page=page))
except:
return HttpResponse('[App::my-app]\tError when trying to retrieve blob for {page}'.format(page=page))
return HttpResponse('Another response')
models.py
class PageBlob(models.Model):
page = models.CharField(max_length=500)
blob = models.TextField(db_column='data', blank=True)
But I can not seem to faithfully capture and retrieve the blob.
Many S.O. questions of storing blobs use the model approach with import base64 to encode and decode the blob. One even recommends using the BinaryField. However, Django's documentation states firmly that BinaryField is not a replacement for the handling of static files.
So how could I achieve this?
S.O. posts I have found helpful to get this far
Upload an image blob from Ajax to Django
How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)
How to download data in a blob field from database in django?
passing blob parameter to django
Returning binary data with django HttpResponse
https://djangosnippets.org/snippets/1597/
Django Binary or BLOB model field
Django CSRF check failing with an Ajax POST request
How can javascript upload a blob?
I am trying to use Facebooks post to page feature of the GraphRequest API but I am running intro trouble trying to post child attachments. It says it expects the child attachments field as an array (https://developers.facebook.com/docs/graph-api/reference/v2.5/page/feed)
but when I give it in the following format, react native spits out the following error:
JSON value '(
{
link = "google.com";
picture = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
}
)' of type NSMutableArray cannot be converted to NSString
Code Below:
const postRequestParams = {
message: {
string: 'Hi!'
},
child_attachments: {
string: [{link: 'google.com', picture: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}]
}
}
const postRequestConfig = {
httpMethod: 'POST',
version: 'v2.10',
parameters: postRequestParams,
accessToken: pageAccessToken
}
new GraphRequestManager().addRequest(new GraphRequest('/' + fb_page_id + '/feed', postRequestConfig, (error, result) => {
if (error) {
console.log(error)
//alert('Error Sharing Post to Facebook: ' + error.toString());
} else {
console.log("post ot Fb page was successful")
}
})).start()
This must be close but I can't figure out what's causing the error.
In my Titanium app, I have a Webview with a canvas element and this code:
function getImageData() {
return canvas.toDataURL('image/png');
}
I am moving that data to the Titanium app like this:
var imageBase64data = webview.evalJS('getImageData()')
The data looks good starting with "data:image/png;base64,"...
Then in Titanium, I have a logged-in drupal session and call this function:
function uploadImage(imageBase64data, callback) {
var url = REST_PATH + "file.json";
var file = {
filename: utils.createRandomString() + ".png",
file: imageBase64data
// uid: Titanium.App.Properties.getString("userUid"),
// filesize: ""+Titanium.Utils.base64decode(imageBase64data).length,
};
var xhr = Titanium.Network.createHTTPClient({timeout: 30000});
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
var authString = Titanium.App.Properties.getString("userSessionName")+'='+Titanium.App.Properties.getString("userSessionId");
xhr.setRequestHeader("Cookie", authString);
xhr.onload = function() {
if(xhr.status == 200) {
var response = xhr.responseText;
callback(response);
}
};
xhr.onerror = function(e) {
alert("There was an error: " + e.error);
Ti.API.info(JSON.stringify(this));
};
xhr.open("POST", url);
xhr.send(file);
}
xhr.onerror is being called with e.error = "undefined"
The trace looks like this:
{
"responseData":{},
"readyState":4,
"connected":true,"UNSENT":0,"DONE":4,"HEADERS_RECEIVED":2,"OPENED":1,"LOADING":3,
"responseText":null,"status":406
}
I think authentication is working because I was previously getting a "need authentication" error until I added the Cookie header.
That was with the installation provided by Drupanium. I just did a fresh Drupal and fresh Services 3 install and my file is uploading nicely.