mattsches/cors-test.html

## cors-test.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>OwnCloud Calendar+ CORS Test</title>
  <script type="text/javascript">
    var calendarICS = "###CALENDARICSURL###",
        request = new XMLHttpRequest();
    request.open('GET', calendarICS, true);
    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            var resp = request.responseText;
            console.log(resp);
        } else {
            console.log('Server returned error.');
        }
    };
    request.onerror = function() {
        console.log('Connection error.');
    };
    request.send();
  </script>
</head>
<body>
    <h1>OwnCloud Calendar+ CORS Test</h1>
    <h2>1. Install Owncloud (locally, or on a dev server)</h2>
    <p>Install the latest version of OwnCloud from the 8.1.* tree. Tested with OwnCloud <strong>8.1.3</strong>! Also install the Calendar+ app version 1.1.*.</p>
    <p>Won't work with latest master or 8.2.* version because sharing a calendar is broken :-/</p>
    <h2>2. Upload this file to a different domain</h2>
    <p>Copy this file to a web space you have access to. This web space should be accessed by a domain different from your OwnCloud.</p>
    <p>For example, my development installation of OwnCloud resides on my local machine: <code>owncloud.local</code>. I uploaded the <code>cors-test.html</code> file to a remote web server (on <a href="https://uberspace.de/">Uberspace</a>) <code>foo.bar.uberspace.de/cors-test.html</code>.</p>
    <p>This is important because if this file and your OwnCloud are not on different domains, the <a href="https://en.wikipedia.org/wiki/Same-origin_policy">Same-origin policy</a> does not prevent the loading of the .ics file.</p>
    <h2>3. Create Shared Calendar</h2>
    <ol>
        <li>In your OwnCloud, open the Calendar+ app and create a new calendar, e.g. called <code>cors-test</code>.</li>
        <li>Click on the <code>Share calendar</code> icon in the left sidebar, just next to the calendar name.</li>
        <li>In the right-hand sidebar, check <code>Share link</code>, and copy the link URL from the input field that appears. It should look something like this <code>http://your.owncloud.tld/index.php/apps/calendarplus/s/QQpPqaSW1l6PZYf</code></li>
        <li>Open the link in a new tab. It should show a full calendar view of the calendar you just selected for sharing.</li>
        <li>Right-click on the <code>Subscribe</code> button on the top and copy its URL (e.g. <code>http://your.owncloud.tld/index.php/apps/calendarplus/exporteventscalendar?t=QQpPqaSW1l6PZYf</code>). You will need to insert it into this file.</li>
        <li>(Optional) Download the file (named e.g. <code>cors-test.ics</code>) from this last URL, either by opening it in a new tab, or using <code>wget</code> or a similar tool.</li>
        <li>Edit the JavaScript in the <code>head</code> section of this page by replacing <code>###CALENDARICSURL###</code> with the URL you just downloaded.</li>
    </ol>
    <h2>4. Reload This Page</h2>
    <ol>
        <li>Open the developer tools of your browser (Chrome dev tools, or Firebug in Firefox), select the <code>Console</code> view, and reload this page</li>
        <li>What you should see (Chrome):
            <pre>XMLHttpRequest cannot load http://owncloud.local/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
cors-test.html:1</pre>
            <pre>Connection error. cors-test.html:17</pre>
        </li>
        <li>Now apply the PR, adding the <code>@CORS</code> annotation to the <code>exportEvents()</code> method in <code>calendarplus/controller/exportcontroller.php</code>, and you should see:
            <pre>BEGIN:VCALENDAR
VERSION:2.0
PRODID:ownCloud Calendar 1.1.1
X-WR-CALNAME:cors-test
END:VCALENDAR</pre>
        </li>
    </ol>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<title>OwnCloud Calendar+ CORS Test</title>
	<script type="text/javascript">
	var calendarICS = "###CALENDARICSURL###",
	request = new XMLHttpRequest();
	request.open('GET', calendarICS, true);
	request.onload = function() {
	if (request.status >= 200 && request.status < 400) {
	var resp = request.responseText;
	console.log(resp);
	} else {
	console.log('Server returned error.');
	}
	};
	request.onerror = function() {
	console.log('Connection error.');
	};
	request.send();
	</script>
	</head>
	<body>
	<h1>OwnCloud Calendar+ CORS Test</h1>
	<h2>1. Install Owncloud (locally, or on a dev server)</h2>
	<p>Install the latest version of OwnCloud from the 8.1.* tree. Tested with OwnCloud <strong>8.1.3</strong>! Also install the Calendar+ app version 1.1.*.</p>
	<p>Won't work with latest master or 8.2.* version because sharing a calendar is broken :-/</p>
	<h2>2. Upload this file to a different domain</h2>
	<p>Copy this file to a web space you have access to. This web space should be accessed by a domain different from your OwnCloud.</p>
	<p>For example, my development installation of OwnCloud resides on my local machine: <code>owncloud.local</code>. I uploaded the <code>cors-test.html</code> file to a remote web server (on <a href="https://uberspace.de/">Uberspace</a>) <code>foo.bar.uberspace.de/cors-test.html</code>.</p>
	<p>This is important because if this file and your OwnCloud are not on different domains, the <a href="https://en.wikipedia.org/wiki/Same-origin_policy">Same-origin policy</a> does not prevent the loading of the .ics file.</p>
	<h2>3. Create Shared Calendar</h2>
	<ol>
	<li>In your OwnCloud, open the Calendar+ app and create a new calendar, e.g. called <code>cors-test</code>.</li>
	<li>Click on the <code>Share calendar</code> icon in the left sidebar, just next to the calendar name.</li>
	<li>In the right-hand sidebar, check <code>Share link</code>, and copy the link URL from the input field that appears. It should look something like this <code>http://your.owncloud.tld/index.php/apps/calendarplus/s/QQpPqaSW1l6PZYf</code></li>
	<li>Open the link in a new tab. It should show a full calendar view of the calendar you just selected for sharing.</li>
	<li>Right-click on the <code>Subscribe</code> button on the top and copy its URL (e.g. <code>http://your.owncloud.tld/index.php/apps/calendarplus/exporteventscalendar?t=QQpPqaSW1l6PZYf</code>). You will need to insert it into this file.</li>
	<li>(Optional) Download the file (named e.g. <code>cors-test.ics</code>) from this last URL, either by opening it in a new tab, or using <code>wget</code> or a similar tool.</li>
	<li>Edit the JavaScript in the <code>head</code> section of this page by replacing <code>###CALENDARICSURL###</code> with the URL you just downloaded.</li>
	</ol>
	<h2>4. Reload This Page</h2>
	<ol>
	<li>Open the developer tools of your browser (Chrome dev tools, or Firebug in Firefox), select the <code>Console</code> view, and reload this page</li>
	<li>What you should see (Chrome):
	<pre>XMLHttpRequest cannot load http://owncloud.local/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
	cors-test.html:1</pre>
	<pre>Connection error. cors-test.html:17</pre>
	</li>
	<li>Now apply the PR, adding the <code>@CORS</code> annotation to the <code>exportEvents()</code> method in <code>calendarplus/controller/exportcontroller.php</code>, and you should see:
	<pre>BEGIN:VCALENDAR
	VERSION:2.0
	PRODID:ownCloud Calendar 1.1.1
	X-WR-CALNAME:cors-test
	END:VCALENDAR</pre>
	</li>
	</ol>
	</body>
	</html>