Uncaught DOMExceptionというエラーについて

お世話になります。

Wordpressで「WooCommerce Bookings」を使用しているのですが、
先日からWordpressのdatepicker.min.jsを利用したカレンダー表示が
Chromeで機能しなくなりました。Firefoxでは表示されています。

Chromeのデベロッパーツールでは以下のようにエラーが表示されています。

Uncaught DOMException: Failed date-picker.min.js
to execute 'btoa' on 'Window': 
The string to be encoded contains characters outside of the Latin1 range.

該当箇所は以下の部分です。

var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
			return '&#' + c.charCodeAt( 0 ) + ';';

該当箇所(cacheKey)を含む一連のコードです。

	/**
	 * Applys attributes to the dates on the datepicker. This is necessary since we cant
	 * defer beforeShowDay until after our data is loaded.
	 * 
	 * @version 1.10.11
	 * @since   1.10.11
	 * @param   {object} dateRange - Date range for attributes to be applied to.
	 */
	WC_Bookings_DatePicker.prototype.applyStylesToDates = function applyStylesToDates( dateRange ) {

		var checkDate = dateRange.startDate;

		while ( checkDate < dateRange.endDate ) {

			var cacheKey = btoa( checkDate.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
				return '&#' + c.charCodeAt( 0 ) + ';';
			} ) );

			if ( ! this.cache.attributes[ cacheKey ] ) {

				var attributes	= this.getDateElementAttributes( checkDate );
				var selector	= $( 'td[data-month="' + checkDate.getMonth() + '"] a', this.$picker ).filter(function() {
					return $(this).text() == checkDate.getDate();
				}).parent();

				if ( ! attributes.selectable ) {
					attributes.class.push( 'ui-datepicker-unselectable' );
					attributes.class.push( 'ui-state-disabled' );
				}

				if ( checkDate.setHours( 0, 0, 0, 0 ) === new Date().setHours( 0, 0, 0, 0 ) ) {
					attributes.class.push( 'ui-datepicker-today' );
				}

				$.each( attributes, function( key, val ) {
					
					selector.attr( key, ( $.isArray( val ) ) ? val.join( ' ' ) : val );

				});
				
				if ( this.opts.cache ) {
					this.cache.attributes[ cacheKey ] = attributes;
				}

			}

			checkDate.setDate( checkDate.getDate() + 1 );

		}

	}

	/**
	 * If caching is being requested beforeShowDay will use this method to load styles from cache if available.
	 *
	 * @version 1.10.11
	 * @since   1.10.11
	 * @param   {object} date - Date to apply attributes to.
	 */
	WC_Bookings_DatePicker.prototype.maybe_load_from_cache = function maybe_load_from_cache( date ) {

		var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
			return '&#' + c.charCodeAt( 0 ) + ';';
		} ) );

		var defaultClass		= ( '1' === this.customData.default_availability ) ? 'bookable' : 'not-bookable' ;
		var attributes			= [ true, defaultClass, '' ];
		var cachedAttributes	= this.cache.attributes[ cacheKey ];

		if ( cachedAttributes ) {
			cachedAttributes = [ cachedAttributes.selectable, cachedAttributes.class.join( ' ' ), cachedAttributes.title ];
		} else if ( this.bookingsData ) {
			var attrs = this.getDateElementAttributes( date );
			attributes = [ attrs.selectable, attrs.class.join(' '), attrs.title ];
		}

		return cachedAttributes || attributes;

	}

	/**
	 * Returns the default parameters.
	 *
	 * @version 1.10.11
	 * @since   1.10.11
	 */
	WC_Bookings_DatePicker.prototype.get_default_params = function get_default_params() {

		return this.defaultParams || {};

	}

	/**
	 * Set and override the default parameters.
	 * 
	 * @version 1.10.11
	 * @since   1.10.11
	 * @param   {object} params - Parameters to be set or overridden.
	 */
	WC_Bookings_DatePicker.prototype.set_default_params = function set_default_params( params ) {

		var _defaultParams = {
			showWeek			: false,
			showOn				: false,
			numberOfMonths		: 1,
			showButtonPanel		: false,
			showOtherMonths		: true,
			selectOtherMonths	: true,
			gotoCurrent			: true,
			dateFormat			: $.datepicker.ISO_8601,
		}
		
		if ( typeof params !== 'object' ) {
			throw new Error( 'Cannot set params with typeof ' + typeof params );
			return;
		}

		this.defaultParams = $.extend( _defaultParams, params ) || {};

	}
	
	/**
	 * Get the data from the server for a block of time.
	 * 
	 * @since   1.10.11
	 * @param   {string} year - Year being requested.
	 * @param   {string} month - Month being requested.
	 * @returns {object} Deferred object to be resolved after the http request
	 */
	WC_Bookings_DatePicker.prototype.get_data = function get_data( year, month ) {
		year  = undefined !== year  ? year  : new Date().getFullYear();
		month = undefined !== month ? month : new Date().getMonth() + 1;

		/**
		 * Overlay styles when jQuery.block is called to block the DOM.
		 */
		var blockUIOverlayCSS = {
			background: '#fff',
			opacity: 0.6,
		};

		/**
		 * Get a date range based on the start date.
		 *
		 * @since   1.10.11
		 * @param   {string} startDate - Optional start date to get the date range from.
		 * @returns {object} Object referencing the start date and end date for the range calculated.
		 */
		var get_date_range = function get_date_range( startDate ) {

			if ( ! startDate ) {
				startDate = new Date( [ year, month, '01' ].join( '/' ) );
			}

			var range = this.get_number_of_days_in_month( month );
			return this.get_padded_date_range( startDate, range );

		}.bind(this);
		
		var deferred	= $.Deferred();
		var dateRange   = get_date_range();

		startDateString = dateRange.startDate.toString()
		startDateString = btoa( startDateString.replace( /[\u00A0-\u2666]/g, function( c ) {
			return '&#' + c.charCodeAt( 0 ) + ';';
		} ) );

		endDateString = dateRange.endDate.toString();
		endDateString = btoa( endDateString.replace( /[\u00A0-\u2666]/g, function( c ) {
			return '&#' + c.charCodeAt( 0 ) + ';';
		} ) );

		var cacheKey	= startDateString + endDateString;

		if ( this.opts.cache && this.cache.data[ cacheKey ] ) {

			deferred.resolveWith( this, [ dateRange, this.cache.data[ cacheKey ] ] );

		} else {

			var params = {
				'product_id': this.get_custom_data( 'product_id' ),
				'wc-ajax'	: 'wc_bookings_find_booked_day_blocks',
				'security'	: this.$form.data( 'nonce' ),
			}

			this.$picker.block( {
				message: null,
				overlayCSS: blockUIOverlayCSS,
			} );

			params.min_date = dateRange.startDate;
			params.max_date = dateRange.endDate;

			$.ajax({
				context: this,
				url: wc_bookings_date_picker_args.ajax_url,
				method: 'GET',
				data: params,
			})
			.done( function( data ) {
	
				this.bookingsData = this.bookingsDate || {};

				$.each( data, function( key, val ) {
	
					if ( $.isArray( val ) || typeof val === 'object' ) {
	
						var emptyType = ( $.isArray( val ) ) ? [] : {};
	
						this.bookingsData[ key ] = this.bookingsData[ key ] || emptyType;
	
						$.extend( this.bookingsData[ key ], val );
						
					} else {
	
						this.bookingsData[ key ] = val;
	
					}
	
				}.bind( this ) );

				this.cache.data[ cacheKey ] = data;

				if ( ! year && ! month && this.bookingsData.min_date ) {
					dateRange = get_date_range( this.get_default_date( this.bookingsData.min_date ) );
				}
	
				deferred.resolveWith( this, [ dateRange, data ] );

				this.$picker.unblock();
	
			}.bind( this ) );

		}

		return deferred;
		
	}

どうもChrome自体の問題のようなのですが(Firefoxの開発ツールではエラーは表示されません)エラー内容で検索しても目ぼしい情報が得られないためお知恵をお借りしたいです。

think49

2018/09/24 02:02 編集

現象を再現可能なコードを開示して下さい。ちなみに、Firefoxで現象発生しない=Chromeのバグと考えるのは早計です。エラーになるChromeが正しくて、Firefoxのバグである可能性もありますよ。

MyQuestioner

2018/09/24 03:07

think49様、返信ありがとうございます。なるほどChromeが正しいという訳ですね。ちなみにカレンダーが表示されるのはFirefoxとiPhoneやiPadなどのsafariブラウザです。デベロッパーツールでエラーが指摘される周辺のコードを記載いたしました。文字数の関係上date-picker.min.jsのコード全てを記載できないので、一部分だけでは分かり難いかと思いますがご容赦下さい。

行動規範の内容に同意します

回答2件

解決したといえるかどうかわかりませんが、Chromeの言語設定を英語に変更したところエラーが表示されなくなり、カレンダーが表示されるようになりました。（日本語に戻すとダメです…）
Wordpressの多言語化プラグインが上手く作動していないか、設定に間違いがあるのかもしれません。
think49様には、大変丁寧な解説をして頂き、誠にありがとうございました。
直接の解決策でなくてもありがたかったです。

投稿2018/09/24 11:22

MyQuestioner

総合スコア57

ベストアンサー

"InvalidCharacterError" DOMException

Uncaught DOMException: Failed date-picker.min.js
to execute 'btoa' on 'Window': 
The string to be encoded contains characters outside of the Latin1 range.

DOMException は DOM で規定されている例外エラーの一つです。
原因はエラーメッセージに書かれている通り、Latin1 範囲外の文字列を指定しているからです。
簡単な英語なので、エラーメッセージを解読しましょう。

仕様上でも言及されています。

8.3 Base64ユーティリティーメソッド - HTML Standard 日本語訳

result = self . btoa( data )
入力データを取得し、U+0000からU+00FFまでの範囲で文字のみを含むUnicode文字列の形式で、それぞれ値0x00から0xFFまでを持つバイナリーバイトを表し、そのbase64表現に変換したものを返す。
Throws an "InvalidCharacterError" DOMException exception if the input string contains any out-of-range characters.

どうもChrome自体の問題のようなのですが(Firefoxの開発ツールではエラーは表示されません)

従って、Firefoxのバグです。
DOMException のエラーを返す、Google Chrome の動作が正しい。

対策

対策はMDNで言及されている通り、[0x00-0xFF] の範囲内に収まるようにエンコードすれば良いのですが、

window.btoa - Web API インターフェイス | MDN

バイナリデータなら範囲内に収まるはずなので、用途が誤っている予感があります。

Re: MyQuestioner さん

投稿2018/09/24 02:01

think49

総合スコア18164

MyQuestioner

2018/09/24 03:25

think49様、詳細な回答ありがとうございます。エラーメッセージが何も示しているのかは分かったのですが、具体的にどうしてよいか分からないというのが実情です。つい先日までChromeで表示されていたものが急に表示されなくなる…。 Chromeをアップデートさせたわけではありませんし、プラグインの更新をした訳でもない…。キャッシュプラグインを使用していたので、しばらく古いキャッシュを見ていたため、Chromeの仕様変更に気が付かなかったということも考えられます。 >バイナリデータなら範囲内に収まるはずなので、用途が誤っている予感があります。そうなりますとブラウザの問題ではなくコードに問題があるということののですね…。正直さっぱりなのですが、何か良い方法はありますでしょうか？ teratailは答えを聞く場でないことは重々分かっているのですが、今回のはちょっと自分の能力では厳しいです。。。

行動規範の内容に同意します

あなたの回答