Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: stronger postMessage handling in intents #159

Merged
merged 6 commits into from
May 17, 2017
Merged

feat: stronger postMessage handling in intents #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
882c6f9
feat: cancel intent on service window unload :sparkles:
gregorylegarec May 17, 2017
c01707e
feat: use intent id in postMessage to improve robustness :policeman:
gregorylegarec May 17, 2017
cfde78a
feat: add types for success and cancel messages for intents, increase…
gregorylegarec May 17, 2017
9083ad6
docs: update CHANGELOG about intents :books:
gregorylegarec May 17, 2017
2f27753
fix: bad handshake from service :ambulance:
gregorylegarec May 17, 2017
2de5b3e
fix: avoid cancelling twice on unload :ambulance:
gregorylegarec May 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- none yet

### Fixed
- none yet
- Safer communication protocol in intents.

### Added
- `cancel()` method on service object returned by `cozy.client.intents.createService()``
Expand Down
66 changes: 48 additions & 18 deletions src/intents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {cozyFetchJSON} from './fetch'
const intentClass = 'coz-intent'

// inject iframe for service in given element
function injectService (url, element, data) {
function injectService (url, element, intent, data) {
const document = element.ownerDocument
if (!document) throw new Error('Cannot retrieve document object from given element')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason why this validation code is not in the Promise constructor ?

I think you should not mix synchronous code and asynchronous code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it could be I think the reason is that we should do

const document = element.ownerDocument

twice, in two different part of the code. We may think about it in a next dedicated PR.


Expand All @@ -23,21 +23,36 @@ function injectService (url, element, data) {
const messageHandler = (event) => {
if (event.origin !== serviceOrigin) return

if (event.data === 'intent:ready') {
if (event.data.type === `intent-${intent._id}:ready`) {
handshaken = true
return event.source.postMessage(data, event.origin)
}

window.removeEventListener('message', messageHandler)
iframe.parentNode.removeChild(iframe)

if (event.data === 'intent:error') {
if (event.data.type === `intent-${intent._id}:error`) {
return reject(new Error('Intent error'))
}

return handshaken
? resolve(event.data)
: reject(new Error('Unexpected handshake message from intent service'))
if (handshaken && event.data.type === `intent-${intent._id}:cancel`) {
return resolve(null)
}

if (handshaken && event.data.type === `intent-${intent._id}:done`) {
return resolve(event.data.document)
}

if (!handshaken) {
return reject(new Error('Unexpected handshake message from intent service'))
}

// We may be in a state where the messageHandler is still attached to then
// window, but will not be needed anymore. For example, the service failed
// before adding the `unload` listener, so no `intent:cancel` message has
// never been sent.
// So we simply ignore other messages, and this listener will stay here,
// waiting for a message which will never come, forever (almost).
}

window.addEventListener('message', messageHandler)
Expand Down Expand Up @@ -68,7 +83,7 @@ export function create (cozy, action, type, data = {}, permissions = []) {
return Promise.reject(new Error('Unable to find a service'))
}

return injectService(service.href, element, data)
return injectService(service.href, element, intent, data)
})
}

Expand All @@ -85,7 +100,9 @@ function listenClientData (intent, window) {
}

window.addEventListener('message', messageEventListener)
window.parent.postMessage('intent:ready', intent.attributes.client)
window.parent.postMessage({
type: `intent-${intent._id}:ready`
}, intent.attributes.client)
})
}

Expand All @@ -99,21 +116,34 @@ export function createService (cozy, intentId, serviceWindow) {

return cozyFetchJSON(cozy, 'GET', `/intents/${intentId}`)
.then(intent => {
return listenClientData(intent, serviceWindow)
.then(data => {
let terminated = false
let terminated = false

const terminate = (doc) => {
if (terminated) throw new Error('Intent service has already been terminated')
terminated = true
serviceWindow.parent.postMessage(doc, intent.attributes.client)
}
const terminate = (message) => {
if (terminated) throw new Error('Intent service has already been terminated')
terminated = true
serviceWindow.parent.postMessage(message, intent.attributes.client)
}

const cancel = () => {
terminate({type: `intent-${intent._id}:cancel`})
}

// Prevent unfulfilled client promises when this window unloads for a
// reason or another.
serviceWindow.addEventListener('unload', () => {
if (!terminated) cancel()
})

return listenClientData(intent, serviceWindow)
.then(data => {
return {
getData: () => data,
getIntent: () => intent,
terminate: terminate,
cancel: () => terminate(null)
terminate: (doc) => terminate({
type: `intent-${intent._id}:done`,
document: doc
}),
cancel: cancel
}
})
})
Expand Down
82 changes: 66 additions & 16 deletions test/unit/intents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,9 @@ describe('Intents', function () {

const handshakeEventMessageMock = {
origin: serviceUrl,
data: 'intent:ready',
data: {
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:ready'
},
source: iframeWindowMock
}

Expand Down Expand Up @@ -195,7 +197,9 @@ describe('Intents', function () {

const handshakeEventMessageMock = {
origin: serviceUrl,
data: 'intent:error',
data: {
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:error'
},
source: iframeWindowMock
}

Expand All @@ -222,7 +226,9 @@ describe('Intents', function () {

const handshakeEventMessageMock = {
origin: serviceUrl,
data: 'intent:ready',
data: {
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:ready'
},
source: iframeWindowMock
}

Expand All @@ -232,7 +238,10 @@ describe('Intents', function () {

const resolveEventMessageMock = {
origin: serviceUrl,
data: result,
data: {
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:done',
document: result
},
source: iframeWindowMock
}

Expand Down Expand Up @@ -273,6 +282,33 @@ describe('Intents', function () {

beforeEach(mock.mockAPI('GetIntent'))

it('starts handshake', async function () {
const windowMock = mockWindow()

const clientHandshakeEventMessageMock = {
origin: expectedIntent.attributes.client,
data: { foo: 'bar' }
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
windowMock.addEventListener.withArgs('message', messageEventListener).calledOnce.should.be.true()

messageEventListener(clientHandshakeEventMessageMock)
windowMock.removeEventListener.withArgs('message', messageEventListener).calledOnce.should.be.true()
})

return cozy.client.intents.createService(expectedIntent._id, windowMock)
.then(service => {
const messageMatch = sinon.match({
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:ready'
})

windowMock.parent.postMessage
.withArgs(messageMatch, expectedIntent.attributes.client).calledOnce.should.be.true()
})
})

it('should manage handshake', async function () {
const windowMock = mockWindow()

Expand All @@ -282,7 +318,7 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
windowMock.addEventListener.withArgs('message', messageEventListener).calledOnce.should.be.true()

messageEventListener(clientHandshakeEventMessageMock)
Expand Down Expand Up @@ -334,16 +370,21 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

const service = await cozy.client.intents.createService(expectedIntent._id, windowMock)

service.terminate(result)

const messageMatch = sinon.match({
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:done',
document: result
})

windowMock.parent.postMessage
.withArgs(result, expectedIntent.attributes.client).calledOnce.should.be.true()
.withArgs(messageMatch, expectedIntent.attributes.client).calledOnce.should.be.true()
})

it('should send result document to Client also with no params', async function () {
Expand All @@ -359,16 +400,21 @@ describe('Intents', function () {
}

window.parent.postMessage.callsFake(() => {
const messageEventListener = window.addEventListener.firstCall.args[1]
const messageEventListener = window.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

const service = await cozy.client.intents.createService()

service.terminate(result)

const messageMatch = sinon.match({
type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:done',
document: result
})

window.parent.postMessage
.withArgs(result, expectedIntent.attributes.client).calledOnce.should.be.true()
.withArgs(messageMatch, expectedIntent.attributes.client).calledOnce.should.be.true()

delete global.window
})
Expand All @@ -386,7 +432,7 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

Expand All @@ -410,16 +456,18 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

const service = await cozy.client.intents.createService(expectedIntent._id, windowMock)

service.cancel()

const messageMatch = sinon.match({type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:cancel'})

windowMock.parent.postMessage
.withArgs(null, expectedIntent.attributes.client).calledOnce.should.be.true()
.withArgs(messageMatch, expectedIntent.attributes.client).calledOnce.should.be.true()
})

it('should send null to Client also with no parameters', async function () {
Expand All @@ -431,16 +479,18 @@ describe('Intents', function () {
}

window.parent.postMessage.callsFake(() => {
const messageEventListener = window.addEventListener.firstCall.args[1]
const messageEventListener = window.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

const service = await cozy.client.intents.createService(expectedIntent._id, window)

service.cancel()

const messageMatch = sinon.match({type: 'intent-77bcc42c-0fd8-11e7-ac95-8f605f6e8338:cancel'})

window.parent.postMessage
.withArgs(null, expectedIntent.attributes.client).calledOnce.should.be.true()
.withArgs(messageMatch, expectedIntent.attributes.client).calledOnce.should.be.true()

delete global.window
})
Expand All @@ -454,7 +504,7 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

Expand All @@ -480,7 +530,7 @@ describe('Intents', function () {
}

windowMock.parent.postMessage.callsFake(() => {
const messageEventListener = windowMock.addEventListener.firstCall.args[1]
const messageEventListener = windowMock.addEventListener.secondCall.args[1]
messageEventListener(clientHandshakeEventMessageMock)
})

Expand Down