Disable inspect element in angular 2

Question

I want to disable inspect element in my website. currently what happen i disable the selection of text but user can still copy through the inspect element.

You can't avoid browser inspect element, this is a browser feature, not something related to your page. — Christophe Roussy, Jan 31 '18 at 08:34
Why do you want to do that? Also, how do you think you could possibly do that? — jonrsharpe, Jan 31 '18 at 08:34
You still can inspect another element and then navigate to the element you actually want. If you still want to disable inspecting a specific element you can add a custom context menu or call `preventDefault` on right-click events. If the user disables JavaScript he still can inspect the element. — Günter Zöchbauer, Jan 31 '18 at 08:34
See this below link, and Try it. [click here](https://stackoverflow.com/questions/28690564/is-it-possible-to-remove-inspect-element) — Sakkeer A, Apr 21 '18 at 06:53
See this link below, and try it. [click me](https://stackoverflow.com/questions/28690564/is-it-possible-to-remove-inspect-element) — Sakkeer A, Apr 21 '18 at 06:55

score 0 · Answer 1 · answered Feb 26 '18 at 10:24

0

Normally user can be able to inspect code by pressing F12 or right click. If we are able to disable this both things you can achieve your goal.

Further detail see here

answered Feb 26 '18 at 10:24

Yasir Shabbir Choudhary

2,458
2
27
31

score 0 · Answer 2 · answered Aug 25 '22 at 02:17

You can place this code in your app.component.ts (or any component you need to) in order to prevent users to access mouse right click

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

Also you can have this code to prevent users open inspector by keyboard shortcuts:

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(e: KeyboardEvent) {
    if (e.key === 'F12') {
        return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "I") {
        return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "C") {
        return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "J") {
        return false;
    }
    if (e.ctrlKey && e.key == "U") {
        return false;
    }
    return true;
}

Here is full example:

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(e: KeyboardEvent) {
    console.log(e)
    if (e.key === 'F12') {
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "I") {
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "C") {
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.key === "J") {
      return false;
    }
    if (e.ctrlKey && e.key == "U") {
      return false;
    }
    return true;
  }

  constructor() {
    document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  }
  
  // rest of it...
}

score -1 · Answer 3 · answered Jan 31 '18 at 08:38

The problem is that in order for a page to work the browser needs to recieve the html document (and all related files). Even if all browsers would provide an API for disabling the option of seeing the plain text document in the browser, I could still write my own application that sends http requests and recieves plain text responses. So if you wish to fo this to "increase security" or "protect your intelectual work", I'm sorry to let you know that this is imposible (and also a bad idea, even if it where posible)

I mean that it in inspect element whole iframe is open but i don't want to show iframe content in inspect elements. — Sid Kasundra, Feb 13 '18 at 08:30

Disable inspect element in angular 2

3 Answers3