Is it possible for me to perform cross-site scripting using JavaScript within my personal browser, specifically Firefox?

While watching a Video Tutorial on a certain website, I noticed that the videos were hosted on platform.thinkific.com and displayed in a light theme. However, I prefer Dark Theme, so I decided to invert the color of the video using the filter: invert(90%) property. Manually applying this property each time was quite cumbersome, leading me to write a script for automation. Unfortunately, I encountered an issue with the script: 

Permission denied to access property "document" on cross-origin object

I understand that this error is a result of browser security measures. Since I am running this script within my own browser, I believe there should be a way to disable this feature. My goal is to create a bookmarklet to automate this task, so my question is how can I achieve this? Is there a method to make it function or streamline this workflow?

The script I created looks like this:

var iframedoc = document.getElementById("iframe-ember5848");
var innerdoc = iframedoc.contentDocument || iframedoc.contentWindow.document;
var video=innerdoc.querySelector("#wistia_video video");
video.style.filter=="invert(90%)"?video.style.filter="":video.style.filter="invert(90%)";

My current setup involves using Firefox on Ubuntu 22.04 LTS.

firefoxjavascript

Answer №1

When dealing with an iframe that you have no control over and attempting to manipulate it using JavaScript, the Same-Origin Policy can pose limitations due to security concerns.

If you find yourself in this scenario, it may be beneficial to explore alternative solutions beyond just JavaScript. One option to consider is setting up a server-side reverse proxy.

A simple implementation of this could involve utilizing Express, where numerous resources and examples are available online.

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cross-Origin Resource Sharing problem: "Preflight request response does not meet access control criteria"

I'm currently tackling a Vue.js/Nuxt.js project that involves sending API requests to 'https://app.arianlist.com'. However, I've encountered some CORS challenges and came across this error message: "Access to XMLHttpRequest at &ap ...

javascriptvue.jsnuxt.js

Tips and tricks for effectively utilizing Material UI's sx props in conjunction with a styles object

In my current project, I am working with a styles object that is structured as follows: styles = { color: "#333", fontSize: "16px", }; When applying these styles to a Material UI component like the example below, everything works a ...

javascriptreactjsmaterial-ui

Prevent the automatic inflation of bubbles on the D3 World Map

Currently, I am developing a D3 world map with a zoom feature that allows users to zoom in up to the boundary level of any country or county by clicking on it. I have successfully added bubbles that point to various counties in Kenya, and these bubbles en ...

javascriptjqueryd3.js

The process of handling state in React when it goes live in production

Currently, I am delving into the world of ReactJS as a novice. The intricacies of state management have captivated my interest. A pressing question has surfaced in my mind regarding this topic. Let's consider a scenario - I have developed a React appl ...

javascriptreactjs

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')

I am currently facing an issue with reducing the size of my jQuery code. The main function is to validate a form - if empty, I want to add a class of 'highlight' or remove it using addClass('highlight') and removeClass('highlight&a ...

javascriptjqueryremoveclass

Steps for comparing two inputs and displaying a div:1. Obtain the values of

I am looking to create a basic JavaScript function that will show or hide an element based on whether two input values match. This needs to happen before the form is submitted. <form> <input type="number" name="some1" id="some1"> <input t ...

javascriptjquery

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

I am currently generating a dynamic quantity of divs, each containing a button that triggers a popup when clicked. I am attempting to position the popup below the specific button that activated it, but it remains static and does not move accordingly. <d ...

javascripthtmlcsspopup

Top method for utilizing jQuery to locate, sift through, and implement CSS classes

Let's consider the following scenario: <span class="foo">7</span> <span class="foo">2</span> <span class="foo">9</span> We want to assign a CSS class of 'highest' to 'span.foo' with value great ...

javascriptjquerycssfilter

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

Select the Best jQuery Package

Having a variety of packages available for selection. <div class="image-grid-item" data-search="select"> <input name="pack1" type="checkbox" style="display: none;"> </div> <div class="image-grid-item" data-search="select"> <inp ...

javascriptjquery

I attempted to upload an image using the Google Drive API, but encountered an error in the response

I am attempting to upload an image using the Google Drive API, but I encountered an error in the response message. The error reads as follows: "Failed to load resource: the server responded with a status of 403 ()" ...

javascriptgoogle-drive-api

Steps for transforming an array of objects into an array of values based on a specific key

Is there a way to extract messages based on keywords from a JSON structure? Here is an example of the JSON structure: [{ _id: 123, message: 'hello', username: '1' }, { _id: 456, message: 'world', username: '2'}] I ...

javascriptjson

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

javascriptjquery

What is preventing d3.json from including cookies in the request?

I'm delving into the world of ajax requests with d3.js (v5) and I'm facing a little hiccup. Here's my code snippet: d3.json(uri).then(data =>console.log(data)); When I tried this in an app utilizing cookie authentication, I consistently ...

javascriptjsonajaxd3.jscookies

The Vuejs single-file component fails to display on the page

Even though there are no errors in the browser and Webpack compiles successfully, the message "hello from dashboard" is not displaying on the page. I am currently using Vue version 2.6 In my main.js file: import Vue from 'vue' Vue.component(&a ...

javascriptvue.jsvuejs2vue-component

When clicked, you will be redirected to the details page

Currently, I am developing a React JS application that showcases a list of companies fetched from a Node.js/Express server in a table format. When clicking on each row, it triggers a modal to display some details about the company. The modal consists of t ...

javascriptnode.jsreactjsexpressaxios

Exploring node.js: How to extract elements from a path

I have an array of individuals as shown below: individuals = ['personA', 'personB', 'personC']; I am looking to create a dynamic way to showcase each individual's page based on the URL. For instance, localhost:3000/indi ...

javascriptnode.js

Using Rails: How to invoke a function in the asset pipeline from a JS response?

In one of the JavaScript files I am working with, I have defined an object and a function: chosen.coffee Foo = do_this: -> $('.slider').slider() $ -> Foo.do_this() This code initializes JQueryUI to turn a specific div into a ...

javascriptjqueryruby-on-rails

Using VueJS to apply filters to an object causes a decrease in my application's performance

Recently, I've been working on implementing a filter for a search bar. However, I've noticed that whenever I input something into the search bar, there is a noticeable delay as it loads the entries. I'm not sure if this issue is related to ...

javascriptvue.js