[컴] Nuxtjs 에서 client 에서 request 를 보낼때 referrer 를 보내지 않는 방법

nuxt 에서 referrer / nuxt client 에서 referer / nuxtjs referrer / no referer / no referrer

Nuxtjs 에서 client 에서 request 를 보낼때 referrer 를 보내지 않는 방법

서버쪽으로 보내는 모든 request 에 referrer 가 기본적으로 붙어서 간다.

1. ajax call 에 의해 request 를 보내는 경우
2. tag 에 의해 request 를 보내야 하는 경우(<script>, <img> 등)

ajax call 에서 referrer 삭제

ajax call 에 의해 request 를 보내는 경우는 간단하다. 만약 fetch 함수를 쓴다고 하면 아래처럼 option 에 referrer 에 대한 설정을 주면 된다.

• Fetch API

const res = await fetch(url, {
  method: "GET", // POST, PUT, DELETE, etc.
  headers: {
    "Content-Type": "text/plain;charset=UTF-8",
    ...
  },
  referrer: "about:client", // or "" to send no Referer header,
  // or an url from the current origin
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
  ...
});

tag 에 의한 request 에서 referrer 를 삭제

이건 몇번의 테스트를 해봤다. nuxtjs 2.15.7 버전에서 테스트했다.

결과적으로 nuxt.config.js 에 meta tag 를 삽입해서 referrer 를 전송하지 않도록 했다.

nuxt.config.js 에 meta tag 를 삽입

이 방법으로 해결했다. 이 방법의 문제는 전 page 에서 보내지 않는다는 것이다. 그것만 빼면 큰 문제는 없어 보인다.

다른 실패한 방법들은 아래에 적었다.

// nuxt.config.js
export default {
  ...
  head: {
    ... 
    meta: [
      { charset: 'utf-8' },
      {
          name: 'referrer',
          content: 'no-referrer'
      }
    ],
    link: [
      { rel: 'stylesheet', href: '/css/daterangepicker.css' },
      ...
    ],
    script: [
      { src: '/js/jquery-3.5.1.slim.min.js' },
      ...
    ],
  },
  ...
}

실패한 방법 2가지

.vue component 에 넣는 방법 :

다음 처럼 개별 nuxt page 에 meta tag 를 추가할 수 있다. meta tag 는 삽입되긴 하지만, 실제로 referrer 는 계속 붙어서 날아갔다. 이때도

export default {
  ...
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
        ...
      {
                    name: 'referrer',
                    content: 'no-referrer'
             }
    ],
    ...
  },
  ...
}

template 안에 tag 에 넣는 방법:

이 방법은 안됐다. referrerpolicy attribute 가 동작하지 않았다. 계속 referrer 가 header 에 같이 붙어서 갔다.

<template>
    ...
    <img :src="screenImageUrl" referrerpolicy="no-referrer">
  ...
</template>

<script>
    ...

    export default {
        head: {
            meta: [
                {
                    name: 'referrer',
                    content: 'no-referrer'
                }
            ],
        },
        ...
  
</script>
<style>
    ...
</style>