Where to store salt for PBKDF2 and initialization vector for AES via WebCrypto

I would like to build secure notes via javascript and webcrypto.

I have found the possibilities to generate strong key via PBKDF2 and encrypt data via AES.

Here is a sample how to generate key via PBKDF2 in webcrypto, where is required salt:

function getKey(keyMaterial, salt) {
    return window.crypto.subtle.deriveKey(
      {
        "name": "PBKDF2",
        salt: salt, 
        "iterations": 100000,
        "hash": "SHA-256"
      },
      keyMaterial,
      { "name": "AES-GCM", "length": 256},
      true,
      [ "encrypt", "decrypt" ]
    );
  }

https://github.com/mdn/dom-examples/blob/master/web-crypto/derive-key/pbkdf2.js#L37-L50

This key is use for encrypt data:

let keyMaterial = await getKeyMaterial();
salt = window.crypto.getRandomValues(new Uint8Array(16));
let key = await getKey(keyMaterial, salt);
iv = window.crypto.getRandomValues(new Uint8Array(12));
let encoded = getMessageEncoding();

ciphertext = await window.crypto.subtle.encrypt(
  {
    name: "AES-GCM",
    iv: iv
  },
  key,
  encoded
);

I will need this information for future decryption. I would like to export this data from browser and decrypt this data later with provided password.

I want to have following JSON format:

data: {
  notes:[
        {
         encryptedNote: '..',
         iv: '..',
        }
        ]
  salt: '..'
}

Now I am not sure how to store securely salt and initialization vector? Is it possible to store data like above?

Sure, the salt and IV can be stored as plaintext.

Note that the IV is sometimes static or calculated from PBKDF2 (if key + IV doesn't exceed the hash output size). The key is unique for each salt + password combination after all. However, it seems you want to store multiple notes using a single password/key, so in that case a separate IV makes sense.

I'd add a version number to your protocol and make sure that the number of iterations can be adjusted though. Personally I would also calculate a key check value to validate the password, otherwise you'll have to decrypt a note just to check if the password is correct.

Beware that the messages can be deleted or rearranged even from multiple data blocks (assuming the same password) in your current scheme; the encryption only protects the individual messages.

Personally I would like some kind of asymmetric crypto for protocols such as these, but I don't know if that's feasible in your context. Password based encryption is not the strongest form of protection out there.