Permission denied to get property “href” on cross-origin object

by

When you encounter the error message “Permission denied to get property ‘href’ on cross-origin object”, it means that you are trying to access the href property of an object from a different origin or domain. Web browsers enforce the same-origin policy to protect users’ data.

The same-origin policy restricts the access between different origins to prevent potential security vulnerabilities. This means that JavaScript running on one domain cannot directly access or manipulate resources (such as properties, methods, or data) from a different domain.

To illustrate it with an example, let’s say you have a web page with the following code:

<!DOCTYPE html>
<html>
<head>
  <script>
    const link = document.getElementById('external-link');
    console.log(link.href);
  </script>
</head>
<body>
  <a id="external-link" href="https://www.example.com">External Link</a>
</body>
</html>

In this example, we are trying to access the href property of the ‘external-link’ element. However, if this code runs on a different domain than “https://www.example.com,” the browser will block the access due to the same-origin policy.

To overcome this issue, you have a few alternatives:

  1. If you have control over the server-side, you can enable Cross-Origin Resource Sharing (CORS) on the server to explicitly allow cross-origin access to certain resources.
  2. If you are working with an API or a third-party website, check if they provide an API or a JSONP endpoint that allows cross-origin access.
  3. If you only need to access the href attribute value and it’s on the same domain, you can move your JavaScript code inside the body and access it after the element declaration.

Here’s an updated version of the previous example that moves the JavaScript code to the end of the body:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <a id="external-link" href="https://www.example.com">External Link</a>
  
  <script>
    const link = document.getElementById('external-link');
    console.log(link.href);
  </script>
</body>
</html>

Now, the JavaScript code successfully accesses the href property because it is executed after the element declaration.

Leave a comment