Nội dung tiếp thị

Phá vỡ khung nội tuyến: Cách ngăn chặn việc lập khung nội tuyến trái phép cho nội dung của bạn

Một khách truy cập vào trang web của tôi đã từng thông báo cho tôi khi anh ấy nhấp vào một trong các liên kết của tôi trên Twitter; anh ấy đã được đưa đến trang web của tôi với một cửa sổ bật lên lớn và cảnh báo mã độc. Điều đó đủ để khiến ai đó sợ hãi, vì vậy tôi bắt đầu thực hiện một số thử nghiệm. Không có gì sai với trang web của tôi – vấn đề là liên kết.

Liên kết trên một trang web khác tạo ra một thanh công cụ ở trên cùng khuyến khích mọi người nhấp vào liên kết độc hại trong khi tải trang web của tôi trong iframe bên dưới. Đối với hầu hết mọi người, trang web của tôi dường như đang phát tán mã độc. Tôi sẽ không nói rằng tôi thích bất kỳ trang web nào tải trang web của tôi trong khung nội tuyến, vì vậy tôi đã làm điều mà bất kỳ chuyên viên máy tính hợp lý nào cũng sẽ làm… Tôi đã tải lên một trình ngắt khung.

Tuy nhiên, việc tạo khung nội tuyến cho trang web của bạn không phải lúc nào cũng độc hại. Gần đây chúng tôi đã chia sẻ một công cụ, Sniply, để thêm lời kêu gọi hành động (Cố vấn trưởng) đến bất kỳ liên kết trang web nào bạn chia sẻ. Nó thực hiện điều này bằng cách nhúng toàn bộ trang web của bạn vào iframe và áp dụng div trên nội dung của bạn bằng lời kêu gọi hành động.

Nhưng tôi khá đặc biệt về nội dung của mình và nỗ lực tôi đã bỏ ra Martech Zone, vì vậy tôi không muốn bất kỳ ai lập khung nội tuyến cho nội dung của mình, ngay cả với nền tảng chia sẻ liên kết. Khi thực hiện một số nghiên cứu, có khá nhiều cách để xử lý việc này.

Cách dừng nội dung nội dung của bạn bằng JavaScript

Mã JavaScript này kiểm tra xem cửa sổ hiện tại (self) không phải là cửa sổ trên cùng (top). Nếu không, điều này có nghĩa là trang nằm trong một khung, khung nội tuyến hoặc tương tự và tập lệnh sẽ chuyển hướng cửa sổ trên cùng tới cửa sổ URL của cửa sổ hiện tại. Điều này một cách hiệu quả nổ ra của iframe.

<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>

Có một số nhược điểm của phương pháp này:

  1. Sự phụ thuộc vào JavaScript: Nếu người dùng đã tắt JavaScript, phương pháp này sẽ không hoạt động.
  2. Sự chậm trễ: Có thể có một chút chậm trễ trước khi JavaScript thực thi, trong thời gian đó phiên bản được đóng khung của trang web của bạn vẫn có thể hiển thị.
  3. Hạn chế nguồn gốc chéo: Trong một số trường hợp, Chính sách xuất xứ giống nhau có thể ngăn tập lệnh này hoạt động như dự định. Nếu tài liệu gốc nằm trên một miền khác, nó có thể không truy cập được top.location.href.
  4. Tiềm năng cho Frame-Busting-Busters: Ngoài ra còn có các tập lệnh (được gọi là chặn truy xuất khung hình) có thể ngăn chặn hoạt động của các tập lệnh chặn truy xuất khung hình.

Cách tiếp cận tốt hơn là sử dụng các tiêu đề phản hồi HTTP.

X-Frame-Options và Content-Security-Policy

Cả hai X-Frame-OptionsContent-Security-Policy (CSP) là các tiêu đề phản hồi HTTP được sử dụng để tăng cường bảo mật cho trang web. Mỗi loại phục vụ các mục đích hơi khác nhau và có mức độ linh hoạt khác nhau.

X-Frame-Options là một tiêu đề HTTP cũ hơn được thiết kế đặc biệt để kiểm soát xem trang web của bạn có thể được nhúng vào một <frame>, <iframe>, <embed>, hoặc là <object> trên một trang web khác. Nó có ba chỉ thị có thể:

  1. DENY – Không thể hiển thị trang trong một khung, bất kể trang web đang cố gắng làm như vậy.
  2. SAMEORIGIN – Trang chỉ có thể được hiển thị trong một khung có cùng nguồn gốc với chính trang đó.
  3. ALLOW-FROM uri – Trang chỉ có thể được hiển thị trong một khung trên nguồn gốc được chỉ định.

Tuy vậy, X-Frame-Options bị hạn chế ở chỗ nó không thể xử lý các tình huống phức tạp hơn, chẳng hạn như cho phép tạo khung từ nhiều nguồn gốc khác nhau hoặc sử dụng ký tự đại diện cho tên miền phụ. Không phải tất cả các trình duyệt đều hỗ trợ ALLOW-FROM Chỉ thị.

Content-Security-Policy, mặt khác, là một tiêu đề HTTP mạnh mẽ và linh hoạt hơn nhiều. Trong khi nó có thể làm mọi thứ X-Frame-Options có thể làm và hơn thế nữa, mục đích chính của nó là ngăn chặn một loạt các cuộc tấn công chèn mã, bao gồm cả kịch bản chéo trang (XSS) và clickjacking. Nó hoạt động bằng cách chỉ định một danh sách trắng các nguồn nội dung đáng tin cậy (tập lệnh, kiểu, hình ảnh, v.v.).

Để kiểm soát các khung, CSP sử dụng frame-ancestors chỉ thị. Bạn có thể chỉ định nhiều nguồn, bao gồm nhiều miền và miền con ký tự đại diện. Đây là một ví dụ:

cssCopy codeContent-Security-Policy: frame-ancestors 'self' yourdomain.com *.domain2.com;

Điều này sẽ cho phép trang được đóng khung trên trang web của chính nó ('self'), trên yourdomain.comvà trên bất kỳ tên miền phụ nào của domain2.com.

CSP đang được đề nghị thay thế cho X-Frame-Options, vì nó có thể xử lý mọi thứ X-Frame-Options có thể làm, và nhiều hơn nữa. Mặc dù hầu hết các trình duyệt hiện đại đều hỗ trợ CSP, vẫn có thể có một số trình duyệt cũ hoặc ít phổ biến hơn không hỗ trợ đầy đủ CSP.

Làm thế nào để dừng iframe nội dung của bạn với HTML

Hiện có thẻ meta Chính sách bảo mật nội dung có thể được triển khai để vô hiệu hóa khả năng iframe nội dung của bạn:

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' yourdomain.com">

Hiệu quả của thẻ meta HTML bị hạn chế vì không phải tất cả các trình duyệt đều tôn trọng Content-Security-Policy khi được đặt bằng thẻ meta.

Cách dừng nội dung nội dung của bạn bằng các tiêu đề HTTP

Tốt hơn là sử dụng các tiêu đề HTTP X-Frame-Options or Content-Security-Policy để kiểm soát khung hình. Các tùy chọn này đáng tin cậy hơn, an toàn hơn và hoạt động ngay cả khi JavaScript bị tắt. Chỉ nên sử dụng phương pháp JavaScript như là phương sách cuối cùng nếu bạn không có quyền kiểm soát máy chủ để đặt tiêu đề HTTP. Đối với mỗi ví dụ, thay thế yourdomain.com với tên miền thực tế của bạn.

Apache - Sửa đổi của bạn .htaccess tập tin như sau:

Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' yourdomain.com"

Nginx – Sửa đổi khối máy chủ của bạn như sau:

add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";

IIS - làm điều này bằng cách thêm phần sau vào của bạn web.config tập tin:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

WordPress – thực hiện việc này bằng cách thêm mã này vào tệp tin functions.php của bạn:

function add_security_headers() {
  header('X-Frame-Options: SAMEORIGIN');
  header("Content-Security-Policy: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');

Các cấu hình này sẽ chỉ cho phép trang của bạn được nhúng trong iframe trên miền chính xác mà bạn chỉ định, không phải trên bất kỳ miền phụ nào của miền. Nếu bạn muốn cho phép một số tên miền phụ nhất định, bạn sẽ phải liệt kê chúng một cách rõ ràng, chẳng hạn như subdomain1.yourdomain.com subdomain2.yourdomain.com, Và như vậy.

Cho phép iframe nội dung của bạn từ nhiều miền

Bạn có thể chỉ định nhiều miền với tiêu đề phản hồi HTTP Chính sách bảo mật nội dung và chỉ thị tổ tiên khung. Một khoảng trắng nên phân tách từng miền. Đây là một ví dụ:

Content-Security-Policy: frame-ancestors 'self' domain1.com domain2.com domain3.com;

Apache - Sửa đổi của bạn .htaccess tập tin như sau:

Header always set X-Frame-Options SAMEORIGINHeader always set Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com"

Nginx – Sửa đổi khối máy chủ của bạn như sau:

add_header X-Frame-Options SAMEORIGIN;add_header Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com";

IIS - làm điều này bằng cách thêm phần sau vào của bạn web.config tập tin:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
      <add name="Content-Security-Policy" value="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Cho phép tạo khung nội tuyến cho nội dung của bạn từ miền ký tự đại diện

Bạn cũng có thể chỉ định ký tự đại diện cho tất cả các tên miền phụ bằng Content-Security-Policy Tiêu đề phản hồi HTTP và chỉ thị tổ tiên khung. Dưới đây là những ví dụ về Content-Security-Policy mã cần được cập nhật:

Content-Security-Policy: frame-ancestors 'self' *.yourdomain.com;

Apache - Sửa đổi của bạn .htaccess tập tin như sau:

Header always set Content-Security-Policy "frame-ancestors 'self' *.yourdomain.com"

Nginx – Sửa đổi khối máy chủ của bạn như sau:

add_header Content-Security-Policy "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";

IIS - làm điều này bằng cách thêm phần sau vào của bạn web.config tập tin:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' *.yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.